Skip to main content

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