Segmented
Overview
Usage
Examples
API
A segmented control is a connected row of mutually-exclusive toggle buttons for switching a view, unit, or mode inline — think List / Grid / Board or °C / °F. <rhombus-segmented> wraps Material's <mat-button-toggle-group>, is driven by an options array (like Select and Radio Group), and routes its colour through the token contract so the active segment re-skins with the theme. Unlike a Radio Group it is a compact inline switcher; unlike a Chip group it is not a set of removable filters.
Example
View: grid
When to use
- When 2–5 short, mutually-exclusive options must all stay visible and picking one switches a view/unit/mode inline.
- Use the opt-in
multiplemode for a small toggle-button toolbar (e.g. Bold / Italic / Underline).
When not to use
- For a form's one-of-many question, prefer a Radio Group.
- For longer lists or tight space, prefer a Select; for removable filter tags, a Chip group.
Was this page helpful?