Toggle Group

Toggles joined the way the segmented tabs are.

pulls in@base-ui/reactclass-variance-authority@afterglow/toggle

Installation

npx shadcn@latest add @afterglow/toggle-group

Component structure.

ToggleGroup
└── ToggleGroupItem

The variant and size reach the items through context, so a group is styled once rather than at every item.

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"default" \| "sm" \| "lg"	"default"

Its own variant and size are the fallback. Whatever the group sets wins.

Prop	Type	Default
variant	"default" \| "outline"	"default"
size	"default" \| "sm" \| "lg"	"default"

Everything else is Base UI toggle group's API, documented there.