Toggle group

Toggles joined edge to edge, one outer radius, the Button group recipe. single is a mode — view as list or board. multiple is independent formatting. Never for navigation: that is Tabs.

import { ToggleGroup, ToggleGroupItem } from "@stocklots/ui-components/components/toggle-group";

<ToggleGroup type="single" value={align} onValueChange={(v) => v && setAlign(v)} aria-label="Alignment">
  <ToggleGroupItem value="left" aria-label="Align left"><AlignLeft /></ToggleGroupItem>
</ToggleGroup>

Single (alignment)

type="single", one value chosen; the group keeps its value when the active item is clicked again.

Multiple (formatting)

type="multiple", any number of values chosen.

Outline, sizes

sm 32px, default 40px, lg 48px.