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 { Heart } from "lucide-react"
import { ToggleButton } from "@/components/ui/heroui-toggle-button"

export default function Default() {
  return (
    <ToggleButton>
      <Heart />
      Like
    </ToggleButton>
  )
}