Toggle Group

A set of two-state buttons that can be toggled on or off.

Examples

Multiple Selection

Single Selection (Outline)

Code

Example

import { ToggleGroup, ToggleGroupItem } from "cephalopod-design-system"
import { Bold, Italic, Underline } from "lucide-react"

<ToggleGroup type="multiple">
  <ToggleGroupItem value="bold">
    <Bold className="h-4 w-4" />
  </ToggleGroupItem>
  <ToggleGroupItem value="italic">
    <Italic className="h-4 w-4" />
  </ToggleGroupItem>
</ToggleGroup>