About
Groups multiple ToggleButtons into a unified control, allowing users to select one or multiple options with single or multiple selection modes.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle Button Group to your project and fits it to your theme.
Code
How Toggle Button Group is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
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>
)
}
Dependencies
More by Hero Ui
View all
DatePicker
465
Chip
440
The Pagination
361
HeroUI Color Picker
105
Skeleton
104
HeroUI Table
100
HeroUI Disclosure Group
94
HeroUI AlertDialog
80
More in Buttons
View all
Button Save
46
Button
20
Eclipse Button
5
Button
32
Button
6
Button
14
Button Group
37
Split Button
32
