{"componentChunkName":"component---src-pages-components-radio-button-style-mdx","path":"/components/radio-button/style/","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":"268ff8bf-ad76-5e3f-bab7-c09a902d6046","children":[],"parent":"e17248cb-28ed-549c-a999-d7b4ffe15827","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":"d8b0ed6378205dc28779416f6a37b8c4","counter":1414,"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":"/zeit/3eb073a4/src/pages/components/radio-button/style.mdx"}}}}