Components
HeroUI Button
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.
import { Button } from "@/components/ui/heroui-button"
import { Spinner } from "@heroui/react"
export default function Loading() {
return (
<div className="flex min-h-screen w-full items-center justify-center p-8">
<Button variant="primary" isPending>
<Spinner />
Uploading...
</Button>
</div>
)
}
More examples
VariantsOpen page →
SizesOpen page →
With IconsOpen page →
Icon OnlyOpen page →
Disabled StateOpen page →
Full WidthOpen page →
Loading StateOpen page →
Social ButtonsOpen page →
Custom Render FunctionOpen page →
