Buttons
HeroUI v3 Button variants and sizes
Variants
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
<Button variant="danger-soft">Danger Soft</Button>
<Button isDisabled>Disabled</Button>Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>States
<Button isPending>Loading...</Button>
<Button isIconOnly aria-label="Settings">⚙️</Button>With Next.js Link
For navigation, use buttonVariants() to style Next.js Link components.
import Link from "next/link";
import { buttonVariants } from "@heroui/react";
<Link href="/dashboard" className={buttonVariants()}>
Go to Dashboard
</Link>
<Link href="/settings" className={buttonVariants({ variant: "secondary" })}>
Settings
</Link>Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' | 'danger-soft' | 'primary' | Button style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Button size |
isDisabled | boolean | false | Disable the button |
isPending | boolean | false | Show loading state |
isIconOnly | boolean | false | Icon-only button (requires aria-label) |