Content switcher
Color
Content switchers have two main states: selected
and unselected
. By default,
content switcher buttons are unselected with the selected state using a high
contrast color.
Class | Property | Color token |
---|---|---|
.bx--content-switcher-btn | background-color | $ui-background |
.bx--content-switcher-btn | text color | $text-02 |
--selected | background-color | $ui-05 |
--selected | text color | $inverse-01 |
:after | divider | $ui-03 |
Interactive states
Hover states only apply to unselected
buttons.
State | Property | Color token |
---|---|---|
:hover | background-color | $background-hover |
:hover | text color | $text-primary |
:focus | border | $focus |
:disabled | background-color | transparent |
:disabled | text color | $text-disabled |
:disabled | border | $border-disabled |
![Example of content switcher states Example of content switcher states](/static/9e7b4e1bb569e4c4feecd2bc6f0b4de8/3cbba/content-switcher-style-color.png)
Typography
Content switcher label text should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized. The label text should not exceed three words.
Element | Font-size (px/rem) | Font-weight | Type token |
---|---|---|---|
Label | 14 / 0.875 | Regular / 400 | $body-compact-01 |
Structure
Content 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.
Class | Property | px / rem | Spacing token |
---|---|---|---|
.bx--content-switcher | corner radius | 4px | – |
:after | divider | 1px | – |
.bx--content-switcher-btn | padding-left, padding-right | 16 / 1 | $spacing-05 |
![Content switcher structure and spacing measurements Content switcher structure and spacing measurements](/static/fe635d1a3235583470e446b715117056/3cbba/content-switcher-style-1.png)
Structure and spacing measurements for the default size content switcher | px / rem
Sizes
Size | Height px / rem |
---|---|
Small (sm) | 32 / 2 |
Medium (md) | 40 / 2.5 |
Large (lg) | 48 / 3 |
![Sizes for content switcher Sizes for content switcher](/static/32d46fd40b64f094fb4589c322e12ec7/3cbba/content-switcher-style-size.png)
Content switcher sizes | px / rem