Segmented Buttons Component

Control the state of an object or the visibility of section content.

Segmented buttons are a list of JavaScript-based buttons; their purpose is to control the state of an object (e.g. a chart) or the visibility of section content (e.g. branching content).

The selected toggle button is toggled by aria-current="true" attribute.

NOTE: JavaScript is required to handle segmented buttons currently selected button.

Terminology

We use the following terminology when discussing this pattern.

  • Segmented Buttons : The pattern as a whole, a list containing two or more segments (upto a maxium of four)
  • Segment : A regular HTML button (type=button)
  • Current Segment : The button in the group that is currently active
Section Title ComponentSelect Component