Design System
Button
Buttons are used to trigger actions and navigate. They come in various styles and sizes to fit different contexts.
Variants
Buttons support multiple variants to indicate different action types and hierarchy levels.
Default
Secondary
Outline
Ghost
Destructive
Sizes
Buttons come in three sizes to match different UI contexts and information density.
Small
Default
Large
Usage
import { Button } from "@/components/ui/button";
export function MyComponent() {
return (
<Button variant="default" size="default">
Click me
</Button>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "outline" | "ghost" | "destructive" | "default" | Button style variant |
size | "sm" | "default" | "lg" | "icon" | "default" | Button size |
asChild | boolean | false | Render as child element using Radix Slot |