HeroUI Button

Buttons 3

About

HeroUI Button with primary, secondary, tertiary, outline, ghost, danger and danger-soft variants, three sizes (sm/md/lg), icons and icon-only mode, pending/loading state, full-width, disabled state, social sign-in buttons and a render-prop children API. Works in both light and dark themes.

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

Code

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

Usage.tsx

import { Button } from "@/components/ui/heroui-button"
import { Github, Apple } from "lucide-react"

function GoogleIcon() {
  return (
    <svg className="h-4 w-4" viewBox="0 0 24 24" aria-hidden="true">
      <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" />
      <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z" />
      <path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z" />
      <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 0 0 2.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z" />
    </svg>
  )
}

export default function Social() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <div className="flex w-full max-w-xs flex-col gap-3">
        <Button variant="secondary" fullWidth><GoogleIcon />Sign in with Google</Button>
        <Button variant="secondary" fullWidth><Github className="h-4 w-4" />Sign in with GitHub</Button>
        <Button variant="secondary" fullWidth><Apple className="h-4 w-4" />Sign in with Apple</Button>
      </div>
    </div>
  )
}