{"componentChunkName":"component---src-pages-components-content-switcher-style-mdx","path":"/components/content-switcher/style/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Content switcher","description":"Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/content-switcher/style.mdx","titleType":"prepend","MdxNode":{"id":"a69479f9-b49d-5c78-8120-cd5bef9c1816","children":[],"parent":"bd6517af-bf86-51d6-9bd3-9326a607d92f","internal":{"content":"---\ntitle: Content switcher\ndescription: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nContent switchers have two main states: `selected` and `unselected`. By default, content switcher buttons are unselected with the selected state using a high contrast color.\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--content-switcher-btn` | background-color | `$ui-01` |\n| `.bx--content-switcher-btn` | text color | `$text-02` |\n| `--selected` | background-color | `$ui-05` |\n| `--selected` | text color | `$text-04` |\n| `:after` | divider | `$ui-03` |\n\n### Interactive states\n\nHover states only apply to `unselected` buttons.\n\n| State | Property | Color token |\n| ----------- | ---------------- | -------------- |\n| `:hover` | background-color | `$hover-ui` |\n| `:hover` | text color | `$text-01` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-01` |\n| `:disabled` | text color | `$disabled-02` |\n\n## Typography\n\nContent switcher text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The text should not exceed three words.\n\n| Class | Font-size (px/rem) | Font-weight | Type style |\n| --------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--content-switcher-btn` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nContent switchers must have at least two options for the user to choose from. Each container that makes up the content switcher is equal in size. The width of a container is determined by the length of the longest container option text plus the 16 px / 1rem on both sides of the text.\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--content-switcher` | height | 40 / 2.5 | – |\n| `.bx--content-switcher` | corner radius | 4px | – |\n| `:after` | divider | 1px | – |\n| `.bx--content-switcher-btn` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for content switcher | px / rem\n\n","type":"Mdx","contentDigest":"81574584e41f9920d5ee6ae2467eeb12","counter":1339,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Content switcher","description":"Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Content switcher\ndescription: Content switchers manipulate the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## Color\n\nContent switchers have two main states: `selected` and `unselected`. By default, content switcher buttons are unselected with the selected state using a high contrast color.\n\n| Class | Property | Color token |\n| --------------------------- | ---------------- | ----------- |\n| `.bx--content-switcher-btn` | background-color | `$ui-01` |\n| `.bx--content-switcher-btn` | text color | `$text-02` |\n| `--selected` | background-color | `$ui-05` |\n| `--selected` | text color | `$text-04` |\n| `:after` | divider | `$ui-03` |\n\n### Interactive states\n\nHover states only apply to `unselected` buttons.\n\n| State | Property | Color token |\n| ----------- | ---------------- | -------------- |\n| `:hover` | background-color | `$hover-ui` |\n| `:hover` | text color | `$text-01` |\n| `:focus` | border | `$focus` |\n| `:disabled` | background-color | `$disabled-01` |\n| `:disabled` | text color | `$disabled-02` |\n\n## Typography\n\nContent switcher text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The text should not exceed three words.\n\n| Class | Font-size (px/rem) | Font-weight | Type style |\n| --------------------------- | ------------------ | ------------- | ---------------- |\n| `.bx--content-switcher-btn` | 14 / 0.875 | Regular / 400 | `$body-short-01` |\n\n## Structure\n\nContent switchers must have at least two options for the user to choose from. Each container that makes up the content switcher is equal in size. The width of a container is determined by the length of the longest container option text plus the 16 px / 1rem on both sides of the text.\n\n| Class | Property | px / rem | Spacing token |\n| --------------------------- | --------------------------- | -------- | ------------- |\n| `.bx--content-switcher` | height | 40 / 2.5 | – |\n| `.bx--content-switcher` | corner radius | 4px | – |\n| `:after` | divider | 1px | – |\n| `.bx--content-switcher-btn` | padding-left, padding-right | 16 / 1 | `$spacing-05` |\n\n\n\n\n\n
\n\n\n Structure and spacing measurements for content switcher | px / rem\n\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/content-switcher/style.mdx"}}}}