Loading...
Loading...
> Displays a button or a component that looks like a button.
1import { Button } from "@/components/ui/button"
1<Button>> CLICK ME</Button>
1<Button variant="default">> DEFAULT</Button>
1<Button variant="secondary">> SECONDARY</Button>
1<Button variant="outline">> OUTLINE</Button>
1<Button variant="ghost">> GHOST</Button>
1<Button variant="link">> LINK</Button>
1<Button variant="destructive">> DELETE</Button>
1<Button>2 <Mail className="mr-2 h-4 w-4" /> > LOGIN WITH EMAIL3</Button>
1<Button variant="outline" size="icon" aria-label="Download">2 <Download className="h-4 w-4" />3</Button>
1<Button loading>> LOADING...</Button>
1<Button disabled>> DISABLED</Button>
1<Button size="sm">> SMALL</Button>
1<Button size="lg">> LARGE</Button>
1<Button size="xl">> EXTRA LARGE</Button>
1<Button variant="primaryCta">2 > GET STARTED <ArrowRight className="ml-2 h-4 w-4" />3</Button>
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive" | "primaryCta" | "secondaryCta" | "ghostOnDark" | "default" | The visual style of the button. |
| size | "default" | "sm" | "lg" | "xl" | "icon" | "default" | The size of the button. |
| asChild | boolean | false | Render as the child element instead of a button. |
| loading | boolean | false | Show loading spinner and disable button. |
| loadingText | string | "Loading..." | Text to display when loading. |
| disabled | boolean | false | Disable the button. |
✓ Use Button when:
✗ Don't use when:
Variant Selection Guide: