Segmented Button

Storybook Github

Segmented Buttons allow users to select one item at a time from two to four options. Selecting one option automatically turns off the last selection made. Segmented Buttons are mutually exclusive.

Rules of Thumb #

  • Use Segmented Buttons:
    • To filter a Grid or Table.
    • To switch a view's display mode.
  • One option must always be selected.

Appearance and Behavior #

To learn more about adding Help Text to Segmented Buttons, see the Forms and Validation guidance.

Examples #

Do: Use Segmented Buttons to filter an associated table or grid.
Do: Use Segmented Buttons to filter an associated table or grid.
Don’t: Use Segmented Buttons to switch between separate views. Use Tabs instead.
Don’t: Use Segmented Buttons to switch between separate views. Use Tabs instead.
Do: Use Segmented Buttons to switch a view’s display mode.
Do: Use Segmented Buttons to switch a view’s display mode.
Don’t: Use Segmented Buttons for user input in a form. Use Radio Buttons or Select Menus instead.
Don’t: Use Segmented Buttons for user input in a form. Use Radio Buttons or Select Menus instead.