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
Outline (Dark)
For use on dark backgrounds
API Reference
variant"primary""primary" | "secondary" | "ghost" | "inverted"The visual style of the button
size"md""sm" | "md" | "lg"The size of the button
disabledfalsebooleanWhether the button is disabled
children*—ReactNodeThe content of the button
| 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 |