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.

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.

Behavior

Behavior

Screen sizes

Best practices

Specs