Atoms / Toggle Group

Toggle Group

<ToggleGroup />Stable

A clustered set of Toggle buttons. `type='single'` for radio-like behavior (one active at a time); `type='multiple'` for independent on/off per item. Built on Radix ToggleGroup.

import { ToggleGroup, ToggleGroupItem } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Type

Variant

Size

Content

1<ToggleGroup type="single" variant="plain">
2  <ToggleGroupItem value="left"><AlignLeft /></ToggleGroupItem>
3  <ToggleGroupItem value="center"><AlignCenter /></ToggleGroupItem>
4  <ToggleGroupItem value="right"><AlignRight /></ToggleGroupItem>
5</ToggleGroup>

Variants

1<ToggleGroup type="single" defaultValue="center">
2  <ToggleGroupItem value="left"><AlignLeft /></ToggleGroupItem>
3  <ToggleGroupItem value="center"><AlignCenter /></ToggleGroupItem>
4  <ToggleGroupItem value="right"><AlignRight /></ToggleGroupItem>
5</ToggleGroup>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.