HeroUI Toggle Button

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds HeroUI Toggle Button to your project and fits it to your theme.

"use client"

import { Bookmark, Heart } from "lucide-react"
import { ToggleButton } from "@/components/ui/heroui-toggle-button"

export default function IconOnly() {
  return (
    <div className="flex items-center gap-3">
      <ToggleButton isIconOnly aria-label="Like">
        <Heart />
      </ToggleButton>
      <ToggleButton isIconOnly aria-label="Bookmark" variant="ghost">
        <Bookmark />
      </ToggleButton>
    </div>
  )
}