ToggleGroup
Group of toggle buttons via Radix UI
Usage
tsx
import { ToggleGroup, ToggleGroupItem } from '@tryvienna/ui'
<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
<AlignLeftIcon />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
<AlignCenterIcon />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
<AlignRightIcon />
</ToggleGroupItem>
</ToggleGroup>Examples
Single
tsx
<ToggleGroup type="single" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Align left">
<AlignLeftIcon />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
<AlignCenterIcon />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
<AlignRightIcon />
</ToggleGroupItem>
</ToggleGroup>Multiple
tsx
<ToggleGroup type="multiple" defaultValue={['bold']}>
<ToggleGroupItem value="bold" aria-label="Bold">
<BoldIcon />
</ToggleGroupItem>
<ToggleGroupItem value="italic" aria-label="Italic">
<ItalicIcon />
</ToggleGroupItem>
<ToggleGroupItem value="underline" aria-label="Underline">
<UnderlineIcon />
</ToggleGroupItem>
</ToggleGroup>Outline
tsx
<ToggleGroup type="single" variant="outline" defaultValue="center">
<ToggleGroupItem value="left" aria-label="Left">
<AlignLeftIcon />
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Center">
<AlignCenterIcon />
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Right">
<AlignRightIcon />
</ToggleGroupItem>
</ToggleGroup>API Reference
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | null | undefined | - | |
size | "default" | "sm" | "lg" | null | undefined | - |
Also accepts all props from ToggleGroupPrimitive.Root.
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | null | undefined | - | |
size | "default" | "sm" | "lg" | null | undefined | - |
Also accepts all props from ToggleGroupPrimitive.Item.
Data Attributes
| Component | data-slot |
|---|---|
ToggleGroup | "toggle-group" |
ToggleGroupItem | "toggle-group-item" |