Button
A simple button component with variants and sizes.
Button is a simple button component with a few variants and sizes.
import { Button } from "@/components/button";
<Button onClick={() => console.log("clicked")}>Click me</Button>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The button label |
onClick | () => void | — | Click handler |
variant | "primary" | "secondary" | "danger" | "primary" | Visual style of the button |
size | "xs" | "sm" | "md" | "sm" | Size of the button |
disabled | boolean | false | Disables the button and shows reduced opacity |
Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>- primary — Filled with the theme primary color, use for main actions
- secondary — Uses the topbar background color, use for less important actions
- danger — Red, use for destructive actions like deleting a config
Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>