Button
inputsDisplays a button or a component that looks like a button with multiple variants and sizes.
Preview
Installation
npm install @launchapp/design-systemImport
import { Button } from "@launchapp/design-system";Examples
All Variants
<div className="flex flex-wrap gap-2"> <Button>Default</Button> <Button variant="secondary">Secondary</Button> <Button variant="outline">Outline</Button> <Button variant="ghost">Ghost</Button> <Button variant="destructive">Destructive</Button> <Button variant="link">Link</Button></div>Sizes
<div className="flex items-center gap-2"> <Button size="sm">Small</Button> <Button size="md">Medium</Button> <Button size="lg">Large</Button></div>Disabled State
<Button disabled>Disabled</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | The visual style of the button. |
size | "sm" | "md" | "lg" | "icon" | "md" | The size of the button. |
asChild | boolean | false | Render as a child component via Radix Slot. |
disabled | boolean | false | Prevents user interaction. |
onClick | React.MouseEventHandler<HTMLButtonElement> | — | Click event handler. |