{"componentChunkName":"component---src-pages-components-button-style-mdx","path":"/components/button/style/","result":{"pageContext":{"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/button/style.mdx","titleType":"prepend","MdxNode":{"id":"f9296ff6-332f-5513-8ea2-795fc8d69693","children":[],"parent":"17dd19da-85b3-5f8e-b72c-2d914e47f0d7","internal":{"content":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Primary button\n\n| Class | Property | Color token |\n| ------------------- | ---------------- | ----------------- |\n| `.bx--btn--primary` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--primary` | background-color | `$interactive-01` |\n| `:hover` | background-color | `$hover-primary` |\n| `:active` | background-color | `$active-primary` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Secondary button\n\n| Class | Property | Color token |\n| --------------------- | ---------------- | ------------------- |\n| `.bx--btn--secondary` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--secondary` | background-color | `$interactive-02` |\n| `.bx--btn--secondary` | border | `$interactive-02` |\n| `:hover` | background-color | `$hover-secondary` |\n| `:active` | background-color | `$active-secondary` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Tertiary button\n\n| Class | Property | Color token |\n| -------------------- | ---------------- | ----------------- |\n| `.bx--btn--tertiary` | text color | `$interactive-03` |\n| `.bx--btn__icon` | svg | `$interactive-03` |\n| `.bx--btn--tertiary` | background-color | `transparent` |\n| `.bx--btn--tertiary` | border | `$interactive-03` |\n| `:hover` | text color | `$text-04` |\n| `:hover` | svg | `$icon-03` |\n| `:hover` | background-color | `$hover-tertiary` |\n| `:active` | color | `$inverse-01` |\n| `:focus` | background-color | `$interactive-03` |\n| `:focus` | border | `$focus` |\n| `:focus` | color | `$inverse-01` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Ghost button\n\n| Class | Property | Color token |\n| ----------------- | ---------------- | --------------------- |\n| `.bx--btn--ghost` | text color | `$link-01` |\n| `.bx--btn__icon` | svg | `$link-01` |\n| `.bx--btn--ghost` | background-color | – |\n| `:hover` | text color | `$hover-primary-text` |\n| `:hover` | svg | `$hover-primary-text` |\n| `:hover` | background-color | `$hover-ui` |\n| `:active` | background-color | `$active-ui` |\n| `:focus` | border | `$focus` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Danger button\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ---------------- |\n| `.bx--btn--danger--primar` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--danger--primary` | background-color | `$support-01` |\n| `:hover` | background-color | `$hover-danger` |\n| `:active` | background-color | `$active-danger` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n## Typography\n\nButton text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type style |\n| ---------- | ------------------ | ------------- | ---------------- |\n| `.bx--btn` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nA button cannot have any element or text within 16 pixels / 1 rem of its borders. For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside. For a button with a glyph, the space between the button label and the glyph must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with glyphs appear together.\n\n| Class | Property | px / rem | Spacing token |\n| ----------------- | --------------------------- | -------- | ------------- |\n| `.bx--btn` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--btn` | padding-right | 64 / 1 | – |\n| `.bx--btn--sm` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--btn--sm` | padding-right | 64 / 4 | – |\n| `.bx--btn--ghost` | padding-left, padding-right | 16 / 2 | `$spacing-05` |\n| `.bx--btn__icon` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `svg` | size | 16 x 16 | – |\n\n\n\n\n\n\n\n
\n\nStructure measurements for buttons | px / rem\n\n### Recommended\n\nThe following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.\n\n| Attribute | Property | px / rem | Spacing token |\n| ---------------- | ------------------------- | -------- | ------------- |\n| External: button | margin | 1px | - |\n| Button pairings | margin-left, margin-right | 0 | – |\n\n## Sizes\n\nThere are three common button sizes: default, inline, and small. Each button type can use any of these three sizes based on need. The fourth button size, full bleed, has a more reserved application and should rarely be used.\n\n| Button size | Height (px / rem) | Use case |\n| ----------- | ----------------- | ---------------------------------------------------------------------------------- |\n| Full bleed | 64 / 4 | Use when buttons bleed to the edge of a component, like in side panels and modals. |\n| Default | 48 / 3 | Use as primary page actions and other standalone actions. |\n| Inline | 40 / 2.5 | Use when buttons are paired with input fields. |\n| Small | 32 / 2 | Use when there is not enough vertical space for the default sized button. |\n\n\n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"a80072940665f45e73f06c26241688fb","counter":1485,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Button","description":"Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Button\ndescription: Buttons are used to initialize an action. Button labels express what action will occur when the user interacts with it.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n### Primary button\n\n| Class | Property | Color token |\n| ------------------- | ---------------- | ----------------- |\n| `.bx--btn--primary` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--primary` | background-color | `$interactive-01` |\n| `:hover` | background-color | `$hover-primary` |\n| `:active` | background-color | `$active-primary` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Secondary button\n\n| Class | Property | Color token |\n| --------------------- | ---------------- | ------------------- |\n| `.bx--btn--secondary` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--secondary` | background-color | `$interactive-02` |\n| `.bx--btn--secondary` | border | `$interactive-02` |\n| `:hover` | background-color | `$hover-secondary` |\n| `:active` | background-color | `$active-secondary` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Tertiary button\n\n| Class | Property | Color token |\n| -------------------- | ---------------- | ----------------- |\n| `.bx--btn--tertiary` | text color | `$interactive-03` |\n| `.bx--btn__icon` | svg | `$interactive-03` |\n| `.bx--btn--tertiary` | background-color | `transparent` |\n| `.bx--btn--tertiary` | border | `$interactive-03` |\n| `:hover` | text color | `$text-04` |\n| `:hover` | svg | `$icon-03` |\n| `:hover` | background-color | `$hover-tertiary` |\n| `:active` | color | `$inverse-01` |\n| `:focus` | background-color | `$interactive-03` |\n| `:focus` | border | `$focus` |\n| `:focus` | color | `$inverse-01` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Ghost button\n\n| Class | Property | Color token |\n| ----------------- | ---------------- | --------------------- |\n| `.bx--btn--ghost` | text color | `$link-01` |\n| `.bx--btn__icon` | svg | `$link-01` |\n| `.bx--btn--ghost` | background-color | – |\n| `:hover` | text color | `$hover-primary-text` |\n| `:hover` | svg | `$hover-primary-text` |\n| `:hover` | background-color | `$hover-ui` |\n| `:active` | background-color | `$active-ui` |\n| `:focus` | border | `$focus` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n### Danger button\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ---------------- |\n| `.bx--btn--danger--primar` | text color | `$text-04` |\n| `.bx--btn__icon` | svg | `$icon-03` |\n| `.bx--btn--danger--primary` | background-color | `$support-01` |\n| `:hover` | background-color | `$hover-danger` |\n| `:active` | background-color | `$active-danger` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-02` |\n| `:disabled` | text color | `$disabled-03` |\n\n\n\n\n\n\n\n
\n\n## Typography\n\nButton text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized.\n\n| Class | Font-size (px/rem) | Font-weight | Type style |\n| ---------- | ------------------ | ------------- | ---------------- |\n| `.bx--btn` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nA button cannot have any element or text within 16 pixels / 1 rem of its borders. For button groups, the primary button is positioned on the outside of the set, while the secondary button is positioned inside. For a button with a glyph, the space between the button label and the glyph must be greater than or equal to 16 pixels / 1 rem. This is to accommodate for instances where two or more buttons with glyphs appear together.\n\n| Class | Property | px / rem | Spacing token |\n| ----------------- | --------------------------- | -------- | ------------- |\n| `.bx--btn` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--btn` | padding-right | 64 / 1 | – |\n| `.bx--btn--sm` | padding-left | 16 / 1 | `$spacing-05` |\n| `.bx--btn--sm` | padding-right | 64 / 4 | – |\n| `.bx--btn--ghost` | padding-left, padding-right | 16 / 2 | `$spacing-05` |\n| `.bx--btn__icon` | margin-left, margin-right | 16 / 1 | `$spacing-05` |\n| `svg` | size | 16 x 16 | – |\n\n\n\n\n\n\n\n
\n\nStructure measurements for buttons | px / rem\n\n### Recommended\n\nThe following specs are not built into any of the button components but are recommended by design as the proper distance between buttons.\n\n| Attribute | Property | px / rem | Spacing token |\n| ---------------- | ------------------------- | -------- | ------------- |\n| External: button | margin | 1px | - |\n| Button pairings | margin-left, margin-right | 0 | – |\n\n## Sizes\n\nThere are three common button sizes: default, inline, and small. Each button type can use any of these three sizes based on need. The fourth button size, full bleed, has a more reserved application and should rarely be used.\n\n| Button size | Height (px / rem) | Use case |\n| ----------- | ----------------- | ---------------------------------------------------------------------------------- |\n| Full bleed | 64 / 4 | Use when buttons bleed to the edge of a component, like in side panels and modals. |\n| Default | 48 / 3 | Use as primary page actions and other standalone actions. |\n| Inline | 40 / 2.5 | Use when buttons are paired with input fields. |\n| Small | 32 / 2 | Use when there is not enough vertical space for the default sized button. |\n\n\n\n\n\n\n\n
\n","fileAbsolutePath":"/zeit/1dde86ed/src/pages/components/button/style.mdx"}}}}