Toggle Group
A grouped toggle control. Use default as a subtle (Level 2) standalone control, and flat when nested inside Card/Dialog to avoid double elevation.
Basic Usage
Multiple Selection
Variants
default (Level 2) is for standalone UI; flat (Level 1) is for nesting. Outline variants switch the "on" surface to ink.
default
flat
outline
flat-outline
Sizes
sm
default
lg
Disabled
Best Practices
Treat the group as one surface. When nested in a Card, use variant="flat".
Standalone view switcher
Nested in Card
Anti-patterns
Don't nest an elevated group inside an elevated Card—flatten the group instead.
❌ Noisy: default inside Card
✅ Correct: flat inside Card