The library is still in early development. Breaking changes and bugs may occur without prior notice. Thanks for your interest in using the library!
v0.2.47Beta

Search

Toggle Group

Source

A group of toggle buttons for single or multiple selection. Useful for options like text alignment or formatting.

Usage

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>

Examples

Multiple Selection

Use type="multiple" to allow multiple items to be selected:

Sizes

Pass the size prop to the group to set a consistent size across items:

Controlled

Selected: bold

ToastToggle