Toggle group

Grouped toggle buttons

A set of two-state buttons that can be toggled on or off. Supports single or multiple selection, text or icon items, default or compact sizing, and a neutral variant that fills active items grey.

Text items

Icon items (multiple)

Compact

Neutral

The neutral variant fills active items with a solid grey instead of the primary colour, for toggles that should read quietly.

Disabled

tsx
// From the npm package
import { ToggleGroup } from 'rift-ds/components/ToggleGroup/ToggleGroup';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/toggle-group.json