HeroUI Toggle Button

Buttons

About

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.

Code

How HeroUI Toggle Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

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

export default function Sizes() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-3">
        <ToggleButton size="sm">
          <Heart />
          Small
        </ToggleButton>
        <ToggleButton size="md">
          <Heart />
          Medium
        </ToggleButton>
        <ToggleButton size="lg">
          <Heart />
          Large
        </ToggleButton>
      </div>
      <div className="flex items-center gap-3">
        <ToggleButton isIconOnly aria-label="Like" size="sm">
          <Heart />
        </ToggleButton>
        <ToggleButton isIconOnly aria-label="Like" size="md">
          <Heart />
        </ToggleButton>
        <ToggleButton isIconOnly aria-label="Like" size="lg">
          <Heart />
        </ToggleButton>
      </div>
    </div>
  )
}