Toggle Button Group

import { Bold, Italic, Strikethrough, Underline } from "lucide-react"
import { ToggleButton, ToggleButtonGroup } from "@/components/ui/heroui-toggle-button-group"

export default function ToggleButtonGroupDemo() {
  return (
    <ToggleButtonGroup selectionMode="multiple" defaultSelectedKeys={["bold"]}>
      <ToggleButton id="bold">
        <Bold className="h-4 w-4" />
      </ToggleButton>
      <ToggleButton id="italic">
        <ToggleButtonGroup.Separator />
        <Italic className="h-4 w-4" />
      </ToggleButton>
      <ToggleButton id="underline">
        <ToggleButtonGroup.Separator />
        <Underline className="h-4 w-4" />
      </ToggleButton>
      <ToggleButton id="strikethrough">
        <ToggleButtonGroup.Separator />
        <Strikethrough className="h-4 w-4" />
      </ToggleButton>
    </ToggleButtonGroup>
  )
}