Skip to main contenteBay Playbook

Segmented button

v1.0

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

  • CSS
  • 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.

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