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

Request Access to Source Code Repository

The source code Git repository and other useful documentation for Astro’s apps are hosted on Github.com. Please fill out the form below to request access.

How Would You Like to Use Astro’s Source Code?
Which Astro App’s Source Code Would You Like Access to?
Successfully submitted request for source code