Installation
Run the following command:
Update your imports:import { Button } from "@/components/ui/button"
import { Button } from "@/components/ui/button"Usage
import { Button } from "@/components/ui/button";
export default function Home() {
return (
<Button>Click me</Button>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | destructive | outline | secondary | ghost | link | default | Button style variant |
| effect | expandIcon | ringHover | ringHoverOutline | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | - | Special effect applied to the button |
| size | icon | xs | sm | md | default | lg | xl | 2xl | default | Size of the button |
| asChild | boolean | false | Render as a child component |
| Icon | React.ElementType | - | Icon component to display |
| iconPlacement | left | right | - | Position of the icon relative to the text |
HTML & Radix UI Props
The Button component uses Radix UI's Slot primitive and supports:
HTML Attributes
Standard HTML button attributes:
onClickdisabledtype(button, submit, reset)formformActionnamevaluearia-*attributesdata-*attributes- Event handlers like
onMouseEnter,onFocus, etc.
The Button component ensures proper accessibility, keyboard navigation and semantic HTML.