A group of toggle buttons for single or multiple selection. Useful for options like text alignment or formatting.
Import the ToggleGroup
and ToggleGroupItem
components from @bun-ui/react
:
import { ToggleGroup, ToggleGroupItem } from "@bun-ui/react"
<ToggleGroup type="single" value="center">
<ToggleGroupItem value="left">
<AlignLeft />
</ToggleGroupItem>
<ToggleGroupItem value="center">
<AlignCenter />
</ToggleGroupItem>
<ToggleGroupItem value="right">
<AlignRight />
</ToggleGroupItem>
</ToggleGroup>
Use type="multiple"
to allow multiple items to be selected:
Pass the size
prop to the group to set a consistent size across items:
Selected: bold