{"componentChunkName":"component---src-pages-components-progress-indicator-style-mdx","path":"/components/progress-indicator/style/","result":{"pageContext":{"frontmatter":{"title":"Progress indicator","description":"A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.","tabs":["Code","Usage","Style","Accessibility"]},"relativePagePath":"/components/progress-indicator/style.mdx","titleType":"prepend","MdxNode":{"id":"a6f1fe10-97f1-564f-859a-c05ecdb4a918","children":[],"parent":"846dbcb1-85af-5ae7-afb8-06bb2358e3bc","internal":{"content":"---\ntitle: Progress indicator\ndescription: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\nAll steps that have been completed are indicated by an outlined circle with a checkmark. The current step the user is on is indicated by a filled circle. Steps the user has not encountered yet, or future steps, are indicated by an outlined circle.\n\n| Class | Property | Color token |\n| ----------------------------------------------------------- | ---------------- | ----------------- |\n| `.bx--progress-step--complete svg` | fill | `$interactive-04` |\n| `.bx--progress-step--incomplete svg` | fill | `$interactive-04` |\n| `.bx--progress-step--current`
`.bx--progress-line` | background-color | `$interactive-04` |\n| `.bx--progress-step--incomplete`
`.bx--progress-line` | background-color | `$ui-03` |\n| `.bx--progress-label` | text color | `$text-01` |\n| `.bx--progress-optional` | text color | `$text-02` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| --------------------------- | ---------- | ------------- |\n| `.bx--progress-step:focus` | border | `$focus` |\n| `.bx--progress-label:hover` | text color | `$link-01` |\n| `.bx--progress__warning` | fill | `$support-01` |\n\n\n\n\n\n
\n\n\n Examples of current, completed, and future steps for progress indicator\n\n\n## Typography\n\nLabels should be one to two words only, with a limit of 16 characters total per label. All labels should be set in sentence case.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | ------------- | ---------------- |\n| `.bx--progress-label` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--progress-optional` | 14 / 0.875 | Regular / 400 | `$label-01` |\n\n## Structure\n\nThe checkmark icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------ | ------------------------ | -------- | ------------- |\n| `.bx--progress-step` | min-width | 128 / 8 | – |\n| `.bx--progress-step svg` | height, width | 16 / 1 | – |\n| `.bx--progress-step svg` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--progress-label` | margin-top | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for progress indicator | px / rem\n\n\n### Recommended\n\nThe following specs are not built into the progress indicator component but are recommended by design as the proper amount between progress indicator elements.\n\n| Class | Property | px / rem | Spacing token |\n| --------------- | -------- | -------- | ------------- |\n| `.bx--progress` | margin | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Recommended structure and spacing measurements for progress indicator | px /\n rem\n\n","type":"Mdx","contentDigest":"6b5913870edae042947032d0bdfd159c","counter":1556,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Progress indicator","description":"A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.","tabs":["Code","Usage","Style","Accessibility"]},"exports":{},"rawBody":"---\ntitle: Progress indicator\ndescription: A progress indicator is a visual representation of a user's progress through a set of steps. It guides the user through a number of steps in order to complete a specified process.\ntabs: ['Code', 'Usage', 'Style', 'Accessibility']\n---\n\n## Color\n\nAll steps that have been completed are indicated by an outlined circle with a checkmark. The current step the user is on is indicated by a filled circle. Steps the user has not encountered yet, or future steps, are indicated by an outlined circle.\n\n| Class | Property | Color token |\n| ----------------------------------------------------------- | ---------------- | ----------------- |\n| `.bx--progress-step--complete svg` | fill | `$interactive-04` |\n| `.bx--progress-step--incomplete svg` | fill | `$interactive-04` |\n| `.bx--progress-step--current`
`.bx--progress-line` | background-color | `$interactive-04` |\n| `.bx--progress-step--incomplete`
`.bx--progress-line` | background-color | `$ui-03` |\n| `.bx--progress-label` | text color | `$text-01` |\n| `.bx--progress-optional` | text color | `$text-02` |\n\n### Interactive states\n\n| Class | Property | Color token |\n| --------------------------- | ---------- | ------------- |\n| `.bx--progress-step:focus` | border | `$focus` |\n| `.bx--progress-label:hover` | text color | `$link-01` |\n| `.bx--progress__warning` | fill | `$support-01` |\n\n\n\n\n\n
\n\n\n Examples of current, completed, and future steps for progress indicator\n\n\n## Typography\n\nLabels should be one to two words only, with a limit of 16 characters total per label. All labels should be set in sentence case.\n\n| Class | Font-size (px/rem) | Font-weight | Type token |\n| ------------------------ | ------------------ | ------------- | ---------------- |\n| `.bx--progress-label` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n| `.bx--progress-optional` | 14 / 0.875 | Regular / 400 | `$label-01` |\n\n## Structure\n\nThe checkmark icon can be found in the [icons](/guidelines/icons/library) library.\n\n| Class | Property | px / rem | Spacing token |\n| ------------------------ | ------------------------ | -------- | ------------- |\n| `.bx--progress-step` | min-width | 128 / 8 | – |\n| `.bx--progress-step svg` | height, width | 16 / 1 | – |\n| `.bx--progress-step svg` | margin-top, margin-right | 16 / 1 | `$spacing-05` |\n| `.bx--progress-label` | margin-top | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for progress indicator | px / rem\n\n\n### Recommended\n\nThe following specs are not built into the progress indicator component but are recommended by design as the proper amount between progress indicator elements.\n\n| Class | Property | px / rem | Spacing token |\n| --------------- | -------- | -------- | ------------- |\n| `.bx--progress` | margin | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Recommended structure and spacing measurements for progress indicator | px /\n rem\n\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/progress-indicator/style.mdx"}}}}