Skip to main contenteBay Playbook

Segmented button

v1.0

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

  • Skin
  • Marko
  • React
Stylized artwork of a segmented button.

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

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.

A flowchart determining when to use segmented buttons. The chart starts with ‘Can you select more than one option?’, with ‘Yes’ and a ‘No’ options. The ‘Yes’ path takes you to another question: ‘Are the options short & concise?’, with a ‘Yes’ and a ‘No’ option. If you choose ‘Yes’, the final answer is ‘Use checkbox / selection cell’, and if you choose ‘No’ the final answer is ‘Use quick filters’.

If you choose ‘No’ for the first question presented (‘Can you select more than one option?), you are taken to another question: ‘Does the selection change content panels?’. This question has ‘No’ and ‘Yes’ options. Selecting ‘Yes’ will present you with a final option: ‘Use tabs’. Selecting ‘No’ will then take you to another question: ‘How many options can you select from?’. This question has three options: ‘1’, ‘2 to 4’, and 4+’. Selecting ‘1’ will take you to another question: ‘Do you need to confirm selection?’. This question has ‘No’ and ‘Yes’ options. Selecting ‘No’ will present you with a final option: ‘Use toggle’, and selecting ‘Yes’ will present you with a final option: ‘Use checkbox’. Selecting ‘4+’ will present you with a final option: ‘Use dropdown / radio / selection cell’. Selecting ‘2 to 4’ will take you to another question: ‘Are the options short and concise?’. This question has ‘No’ and ‘Yes’ options. selecting ‘No’ will present you with a final option: ‘Use radio button’. Selecting ‘Yes’ will present you with a final option: ‘Use segmented buttons’.

The path from the first question to the final answer of ‘Use segmented buttons’ is highlighted in blue and emphasized as the best use case of using segmented buttons.

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.

A regular size segmented button is above a large segmented button.

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.

A ‘Buy it now’ label sits on an active segmented button, and an ‘Auction’ button sits the other segmented button.

Icon

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

A ‘Gallery’ icon sits to the left of a ‘Gallery’ label on an active segmented button, and a ‘Camera’ icon sits to the left of a ‘Camera’ label the other segmented button.

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.

Three segmented buttons: A segmented button with two segments, a segmented button with three segments, and a segmented button with four segments.

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.

A segmented button is shown with two segments. There is a cursor over the button that is not active, with a hover state applied.

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.

A ‘Price guidance’ chart is shown. A segmented button is used here with four segments: 1D, 1W, 3M, and 1Y. 3M is the active button.

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.

Pink bars are placed to the left and right of a mobile screen to indicate the clear space needed.

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.

Two segmented buttons. A segmented button with a width of 215px and a height of 40px sits above a segmented button with a width of 720px and a height of 48px.

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.

A segmented button on a ‘Create an account’ page on mobile.

Medium and large

Best practices

Specs

A large segmented button is shown with specs highlighted. The segmented button border is 1px, and the color is border.medium. The height of the button is 48px. The padding around the active button fill is 4px. The padding inside of the active button fill is 12px, and the height is 40px. The padding between the icon and label text is 8px.

Large segmented button

A small segmented button is shown with specs highlighted. The segmented button border is 1px, and the color is border.medium. The height of the button is 40px. The padding around the active button fill is 4px. The padding inside of the active button fill is 8px, and the height is 32px. The padding between the icon and label text is 8px.

Small segmented button