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
467
Chip
442
The Pagination
361
HeroUI Color Picker
107
HeroUI Table
106
Skeleton
105
HeroUI Disclosure Group
94
HeroUI AlertDialog
80
More in Buttons
View all
Button
5
Texture Button
97
Button Group
Eclipse Button
39
Button
4
HeroUI Button Group
Base Button
4
App Store Button
458
