HeroUI Button

Buttons 1

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

"use client"

import * as React from "react"
import { Button } from "@/components/ui/heroui-button"
import { Spinner } from "@heroui/react"
import { Paperclip } from "lucide-react"

export default function LoadingState() {
  const [loading, setLoading] = React.useState(false)
  return (
    <div className="flex min-h-screen w-full items-center justify-center p-8">
      <Button
        variant="primary"
        isPending={loading}
        onPress={() => {
          setLoading(true)
          setTimeout(() => setLoading(false), 2200)
        }}
      >
        {loading ? (<><Spinner />Uploading...</>) : (<><Paperclip className="h-4 w-4" />Upload File</>)}
      </Button>
    </div>
  )
}