Segmented button

v1.0

Segmented buttons provide closely related choices that affect an object, state, or view.

Skin
Marko
React

Considerations

Concise

Segmented buttons help reduce cognitive load and keep things simple.

Control

Segmented buttons give quick control to swap choices, states, or views.

Focus

Segmented buttons give more affordance to available controls and actions.

Anatomy

Segment
Icon (optional)
Container
Label text

When to use

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.

Properties

Segmented buttons can have two to four segments and may contain a text label, an icon, or both and come in two visual styles.

Size

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.

Label

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.

Icon

Icons may be used alongside a label. The icon should always be obvious and clearly communicate the option it represents.

Number of controls

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.

Behavior

Hover

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.

Filtering

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.

Behavior

Clear space

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.

Size

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.

Screen sizes

Small

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.

Medium and large

Best practices

Navigation

Do use tabs for navigation, they can be used as secondary or tertiary navigation.

Don’t use segmented buttons for secondary or tertiary navigation.

Short and simple

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.

Active state

Do keep icons consistent and unchanged when active and inactive.

Don’t replace icons with checkmarks when selected.

Consistent size

Do keep button widths consistent across all segments.

Don’t alter the width of individual buttons.

No more than four

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.

Specs

Large segmented button

Small segmented button