Components
Loading preview...
HeroUI v3 ToggleButtonGroup — single/multiple selection toggle buttons with sizes, orientation, detached and controlled modes.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-toggle-button-group"use client"
import {
AlignCenter,
AlignLeft,
AlignRight,
Bold,
Italic,
Strikethrough,
Underline,
} from "lucide-react"
import {
ToggleButtonGroup,
ToggleButton,
} from "@/components/ui/heroui-toggle-button-group"
export default function SelectionMode() {
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
<span className="text-sm text-muted-foreground">Single selection</span>
<ToggleButtonGroup defaultSelectedKeys={["center"]} selectionMode="single">
<ToggleButton id="left">
<AlignLeft />
Left
</ToggleButton>
<ToggleButton id="center">
<ToggleButtonGroup.Separator />
<AlignCenter />
Center
</ToggleButton>
<ToggleButton id="right">
<ToggleButtonGroup.Separator />
<AlignRight />
Right
</ToggleButton>
</ToggleButtonGroup>
</div>
<div className="flex flex-col gap-2">
<span className="text-sm text-muted-foreground">Multiple selection</span>
<ToggleButtonGroup
defaultSelectedKeys={["bold", "underline"]}
selectionMode="multiple"
>
<ToggleButton isIconOnly aria-label="Bold" id="bold">
<Bold />
</ToggleButton>
<ToggleButton isIconOnly aria-label="Italic" id="italic">
<ToggleButtonGroup.Separator />
<Italic />
</ToggleButton>
<ToggleButton isIconOnly aria-label="Underline" id="underline">
<ToggleButtonGroup.Separator />
<Underline />
</ToggleButton>
<ToggleButton isIconOnly aria-label="Strikethrough" id="strikethrough">
<ToggleButtonGroup.Separator />
<Strikethrough />
</ToggleButton>
</ToggleButtonGroup>
</div>
</div>
)
}