{"componentChunkName":"component---src-pages-components-radio-button-style-mdx","path":"/components/radio-button/style/","webpackCompilationHash":"9a5cb62a61994334ab3f","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Radio button","description":"Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/radio-button/style.mdx","titleType":"prepend","MdxNode":{"id":"c1414b13-0eb6-567a-9ed4-774cb93b7da0","children":[],"parent":"2d9d3f75-eae1-557c-8a9a-e166dc124fdd","internal":{"content":"---\ntitle: Radio button\ndescription: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                                   | Property         | Color token |\n| --------------------------------------- | ---------------- | ----------- |\n| `.bx--label`                            | text color       | `$text-02`  |\n| `.bx--radio-button__label`              | text color       | `$text-01`  |\n| `.bx--radio-button__appearance`         | border           | `$ui-05`    |\n| `.bx--radio-button__appearance`         | background-color | `$ui-01`    |\n| `.bx--radio-button__appearance:checked` | border           | `$ui-05`    |\n| `.bx--radio-button__appearance::before` | dot              | `$ui-05`    |\n\n### Interactive colors\n\n| Class                                    | Property   | Color token    |\n| ---------------------------------------- | ---------- | -------------- |\n| `.bx--radio-button__appearance:focus`    | border     | `$focus`       |\n| `.bx--label:disabled`                    | text color | `$disabled-02` |\n| `.bx--radio-button__label:disabled`      | text color | `$disabled-02` |\n| `.bx--radio-button__appearance:disabled` | border     | `$disabled-02` |\n\n## Typography\n\n_Radio button_ labels and headings 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 token       |\n| -------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`               | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--radio-button__label` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n| Class                                  | Property      | px / rem  | Spacing token |\n| -------------------------------------- | ------------- | --------- | ------------- |\n| `.bx--radio-button__appearance`        | height, width | 20 / 1.25 | –             |\n| `.bx--radio-button__appearance:before` | height, width | 8 / 0.5   | –             |\n| `.bx--radio-button__label`             | margin-bottom | 8 / 0.5   | `$spacing-03` |\n| `.bx--radio-button__appearance`        | margin-right  | 8 / 0.5   | `$spacing-03` |\n| `.bx--radio-button__appearance`        | margin-bottom | 8 / 0.5   | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a radio button](images/radio-button-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for radio button | px | rem\n</Caption>\n\n### Recommended\n\nThe following specs are not built into the radio button component but are recommended by design as the proper amount of space around a grouping of or in between stacked radio buttons.\n\n| Class                | Property      | px / rem | Spacing token |\n| -------------------- | ------------- | -------- | ------------- |\n| Horizontal alignment | margin-right  | 16 / 1   | `$spacing-05` |\n| Vertical alignment   | margin-bottom | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a radio button](images/radio-button-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for radio button | px | rem\n</Caption>\n","type":"Mdx","contentDigest":"63e8b8bc91596879352c5ec75d417624","counter":1219,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Radio button","description":"Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Radio button\ndescription: Radio buttons are used when two or more options are mutually exclusive, meaning the user must select only one option.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\n| Class                                   | Property         | Color token |\n| --------------------------------------- | ---------------- | ----------- |\n| `.bx--label`                            | text color       | `$text-02`  |\n| `.bx--radio-button__label`              | text color       | `$text-01`  |\n| `.bx--radio-button__appearance`         | border           | `$ui-05`    |\n| `.bx--radio-button__appearance`         | background-color | `$ui-01`    |\n| `.bx--radio-button__appearance:checked` | border           | `$ui-05`    |\n| `.bx--radio-button__appearance::before` | dot              | `$ui-05`    |\n\n### Interactive colors\n\n| Class                                    | Property   | Color token    |\n| ---------------------------------------- | ---------- | -------------- |\n| `.bx--radio-button__appearance:focus`    | border     | `$focus`       |\n| `.bx--label:disabled`                    | text color | `$disabled-02` |\n| `.bx--radio-button__label:disabled`      | text color | `$disabled-02` |\n| `.bx--radio-button__appearance:disabled` | border     | `$disabled-02` |\n\n## Typography\n\n_Radio button_ labels and headings 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 token       |\n| -------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--label`               | 12 / 0.75          | Regular / 400 | `$label-01`      |\n| `.bx--radio-button__label` | 14 / 0.875         | Regular / 400 | `$body-short-01` |\n\n## Structure\n\n| Class                                  | Property      | px / rem  | Spacing token |\n| -------------------------------------- | ------------- | --------- | ------------- |\n| `.bx--radio-button__appearance`        | height, width | 20 / 1.25 | –             |\n| `.bx--radio-button__appearance:before` | height, width | 8 / 0.5   | –             |\n| `.bx--radio-button__label`             | margin-bottom | 8 / 0.5   | `$spacing-03` |\n| `.bx--radio-button__appearance`        | margin-right  | 8 / 0.5   | `$spacing-03` |\n| `.bx--radio-button__appearance`        | margin-bottom | 8 / 0.5   | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a radio button](images/radio-button-style-1.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for radio button | px | rem\n</Caption>\n\n### Recommended\n\nThe following specs are not built into the radio button component but are recommended by design as the proper amount of space around a grouping of or in between stacked radio buttons.\n\n| Class                | Property      | px / rem | Spacing token |\n| -------------------- | ------------- | -------- | ------------- |\n| Horizontal alignment | margin-right  | 16 / 1   | `$spacing-05` |\n| Vertical alignment   | margin-bottom | 8 / 0.5  | `$spacing-03` |\n\n<div className=\"image--fixed\">\n\n![Structure and spacing measurements for a radio button](images/radio-button-style-2.png)\n\n</div>\n\n<Caption>\n  Structure and spacing measurements for radio button | px | rem\n</Caption>\n","fileAbsolutePath":"/tmp/35443907/src/pages/components/radio-button/style.mdx"}}}}