Button
A polymorphic button component built on Base UI with CVA-powered variant and size styles, supporting icon-only sizes and custom render targets.
Default
Disabled
Disabled buttons use pointer-events-none and reduced opacity — they cannot be focused or triggered.
Error
Click to clear the error.
Set aria-invalid to surface a destructive border + ring. This is distinct from the destructive variant — use it to signal a validation or submission error on a button in a form.
Loading
Loading state is composed with a spinner icon + disabled prop. Click the buttons above to trigger a 2-second simulated action.
Sizes
Variants
When to use each variant
- default — primary call-to-action
- outline — secondary action alongside a primary
- secondary — neutral emphasis, no competing with primary
- ghost — lowest emphasis, toolbars and inline actions
- destructive — irreversible or dangerous operations
- link — inline hyperlink-style action
With Icon
Installation
npx shadcn@latest add @byronwade/buttonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | "default" | Visual style of the button. |
| size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Controls height, padding, and icon sizing. |
| render | React.ReactElement | ((props: object) => React.ReactElement) | — | Swap the underlying element (e.g. a Next.js Link); nativeButton is inferred automatically. |
| nativeButton | boolean | — | Override Base UI's native-button semantics inference when using a custom render target. |
| className | string | — | Additional Tailwind classes merged onto the variant styles. |
| disabled | boolean | — | Disables pointer events and reduces opacity via the disabled: utilities. |