Segmented buttons provide closely related choices that affect an object, state, or view.
Segmented buttons provide a compact way to display multiple mutually exclusive options. They can also be used to switch or sort views such as switching between a list view and a grid view.
Segmented buttons affect section-level views and should not be considered a replacement for navigational tabs.
Large segmented button
Small segmented button
Segmented buttons help reduce cognitive load and keep things simple.
Segmented buttons give quick control to swap choices, states, or views.
Segmented buttons give more affordance to available controls and actions.
There are 2 size options for segmented buttons: Small and Large. It’s generally recommended to choose the larger option, but the smaller alternative is available if needed.
Labels should be short and succinct. If a label is too long to fit within its segment, consider using another component, such as a Dropdown or Quick filter.
Icons may be used alongside a label. The icon should always be obvious and clearly communicate the option it represents.
Segmented buttons can have two to four segments. If more options are needed consider using another component, such as Dropdown, Radio button, or Quick filter.
For elements with a container, a state-layer is added above the content. Each state increases the opacity by 4%. Dark mode uses white for the interaction layer instead of black.
See Color tokens for more details.
Segmented buttons can be used as section-level filters, such as changing the view from grid to list or a data set from day to week.
Segmented buttons should have adequate margins from the edge of the viewport or frame. Adjust the inset as needed within the context of the page design.
The minimum width for the segmented button is 215px and the maximum size is 720px. When possible, use the grid to help guide and find the right segmented button size for your design.
Segmented buttons should have adequate margins from the edge of the viewport or frame. They span full width on small screens up to the page margins.
Do use tabs for navigation, they can be used as secondary or tertiary navigation.
Don’t use segmented buttons for secondary or tertiary navigation.
Do keep labels short and concise. If a label is too long to fit within its segment, consider using another component, such as drop downs or quick filters.
Don’t use long, multi-word labels.
Do keep icons consistent and unchanged when active and inactive.
Don’t replace icons with checkmarks when selected.
Do keep button widths consistent across all segments.
Don’t alter the width of individual buttons.
Segmented buttons are best used for selecting between 2 to 4 choices.
Don’t use more than 4 segments in a single segmented button. If you have more than 4 choices, consider using another component, such as tabs or quick filters.
