Toggle
Toggle presents a compact group of mutually exclusive options as fused buttons, where the selected option is highlighted as primary.
When to use Toggle
Use Toggle when users need to switch between 2–4 short, mutually exclusive options of equal visual weight. Common examples include switching between view modes (list vs. chart) or toggling a filter scope (active vs. inactive).
Toggle vs. Switch
Switch represents a binary on/off state for a single setting (e.g., enabling notifications). Toggle represents a choice between named, labeled alternatives. When the options have distinct labels or icons — and both are always visible — use Toggle. When the state is simply on or off, use Switch.
Toggle vs. Tabs
Tabs are best when each option corresponds to a distinct content panel that replaces the main body of a page or section. Toggle is best for compact, inline mode-switching where the content updates without a full panel swap and where the toggle sits alongside other controls rather than acting as primary navigation.
Toggle vs. RadioButtonGroup
RadioButtonGroup is suited to form contexts where users are choosing from a longer list of options or where an explicit form label and vertical/horizontal stack is appropriate. Toggle is suited to compact UI surfaces (toolbars, table headers, card controls) where space is limited and a button-group aesthetic fits better than a list of radio inputs.