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
470
Chip
446
The Pagination
364
HeroUI Table
122
HeroUI Color Picker
112
Skeleton
105
HeroUI Disclosure Group
96
HeroUI AlertDialog
81
More in Buttons
View all
Button
10
Button
1
Native Button
12
Eclipse Button
42
Texture Button
103
Button
Button
77
Split Button
15
