Skip to main content

Segmented Button

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.

Interactive Example

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.

Asset Status
Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component v7 Available
Component Tokens N/A Planned
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel