{"componentChunkName":"component---src-pages-components-button-style-mdx","path":"/components/button/style/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"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":"37c01775-2584-5f63-9ec0-5a4bfd722fd3","children":[],"parent":"2c043b44-a4f2-5342-9678-88fd8488e7a5","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### 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### 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### 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### 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<div className=\"image--fixed\">\n\n![Example of a normal primary button](images/button-style-1.png)\n\n</div>\n\n<Caption>Primary, secondary, and ghost button state examples</Caption>\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--primary` | height                      | 48 / 3   | –             |\n| `.bx--btn--sm`      | height                      | 32 / 2   | –             |\n| `.bx--btn__icon`    | size                        | 16 x 16  | –             |\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__icon`    | margin-left, margin-right   | 16 / 1   | `$spacing-05` |\n| `.bx--btn--ghost`   | padding-left, padding-right | 16 / 2   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for a primary button](images/button-style-7.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and regular primary button | px / rem\n</Caption>\n\n<div className=\"image--fixed\">\n\n![Structure for a primary button](images/button-style-14.png)\n\n</div>\n\n<Caption>Spacing measurements for various button types | px / rem</Caption>\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","type":"Mdx","contentDigest":"56fe530dfd2e9a10cb8ea0de238553c8","counter":1283,"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### 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### 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### 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### 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<div className=\"image--fixed\">\n\n![Example of a normal primary button](images/button-style-1.png)\n\n</div>\n\n<Caption>Primary, secondary, and ghost button state examples</Caption>\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--primary` | height                      | 48 / 3   | –             |\n| `.bx--btn--sm`      | height                      | 32 / 2   | –             |\n| `.bx--btn__icon`    | size                        | 16 x 16  | –             |\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__icon`    | margin-left, margin-right   | 16 / 1   | `$spacing-05` |\n| `.bx--btn--ghost`   | padding-left, padding-right | 16 / 2   | `$spacing-05` |\n\n<div className=\"image--fixed\">\n\n![Structure for a primary button](images/button-style-7.png)\n\n</div>\n\n<Caption>\n  Structure measurements for small and regular primary button | px / rem\n</Caption>\n\n<div className=\"image--fixed\">\n\n![Structure for a primary button](images/button-style-14.png)\n\n</div>\n\n<Caption>Spacing measurements for various button types | px / rem</Caption>\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","fileAbsolutePath":"/fargate/7b444b50/src/pages/components/button/style.mdx"}}}}