Components
HeroUI v3 ToggleButton — a two-state button that stays pressed/selected when toggled, for like, bookmark, mute and similar on/off actions. Supports default and ghost variants, sm/md/lg sizes, icon-only mode, controlled selection via isSelected/onChange, render-prop children for per-state content, and disabled state, with full React Aria toggle semantics and accessibility. A thin re-export of the genuine @heroui/react package with @heroui/styles, so consumers install and render the real HeroUI primitive.
npx @21st-dev/cli@beta add hero_ui/heroui-toggle-buttonLoading preview...
"use client"
import { Heart } from "lucide-react"
import { ToggleButton } from "@/components/ui/heroui-toggle-button"
export default function Variants() {
return (
<div className="flex items-center gap-3">
<ToggleButton>
<Heart />
Default
</ToggleButton>
<ToggleButton variant="ghost">
<Heart />
Ghost
</ToggleButton>
</div>
)
}
Loading preview...
Loading preview...
Loading preview...
Loading preview...
Loading preview...