Button
A button component with multiple variants and sizes.
Button
Installation
pnpm dlx stera-ui@latest add button
Examples
Variants
Button Variants
| Variant | Description |
|---|---|
brand | Primary brand-colored button |
accent | Accent-colored button |
outline | Bordered button with transparent background |
subtle | Subtle background, no border |
ghost | No background or border |
danger | Destructive action button |
link | Styled as a link |
Sizes
Button Sizes
| Size | Description |
|---|---|
xs | Extra small |
sm | Small |
md | Medium (default) |
lg | Large |
icon | Square icon button |
icon-xs | Extra small icon button |
icon-sm | Small icon button |
icon-lg | Large icon button |
With Icons & Kbd
With Icons & Kbd
Disabled
Disabled
API Reference
Built on Base UI's Button primitive — see the full API reference there.
The Button component extends the native <button> element with additional props:
| Prop | Type | Default |
|---|---|---|
variant | "brand" | "accent" | "outline" | "subtle" | "ghost" | "danger" | "link" | "brand" |
size | "xs" | "sm" | "md" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "md" |
asChild | boolean | false |