Button
FormsButtons allow users to perform actions and choose with a single tap. Use buttons for important actions like submitting forms, confirming dialogs, or triggering operations.
Import
import { Button } from "@/components/ui/button";Usage
Variants
Button styles for different contexts and emphasis levels
Sizes
Three sizes to fit different contexts
States
Disabled state for inactive buttons
Inverted
For use on dark backgrounds
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "inverted" | "primary" | The visual style of the button |
size | "sm" | "md" | "lg" | "md" | The size of the button |
disabled | boolean | false | Whether the button is disabled |
children* | ReactNode | — | The content of the button |