Components
Button
Displays a button or a component that looks like a button.
Variants
The Button component supports three visual variants. Each variant can be combined with the destructive prop for error/danger actions.
import { Button } from "@epilot/volt-ui";
<Button variant="primary">Primary</Button>
<Button variant="secondary" shape="normal">Secondary</Button>
<Button variant="tertiary" shape="normal">Tertiary</Button>
<Button size="icon"><PlusIcon /></Button>
<Button destructive variant="primary">Primary</Button>
<Button destructive variant="secondary">Secondary</Button>
<Button destructive variant="tertiary">Tertiary</Button>
<Button destructive size="icon"><PlusIcon /></Button></div>Sizes
Buttons are available in three sizes to match your design needs.
import { Button } from "@epilot/volt-ui";
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="base">Base</Button>
<Button size="lg">Large</Button>
<Button size="icon-xs"><PlusIcon /></Button>
<Button size="icon-sm"><PlusIcon /></Button>
<Button size="icon"><PlusIcon /></Button>
<Button size="icon-lg"><PlusIcon /></Button>As Child
Use the asChild prop to render the button as another element, such as a Link component. This is useful when you want the button styling but need the behavior of another element.
<Button size="sm" asChild variant="primary">
<a href="/docs/get-started">Documentation
<ExternalLink />
</a>
</Button>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "tertiary" | "primary" | The visual style variant of the button. |
destructive | boolean | false | When true, applies destructive styling to the button variant. |
size | "xs" | "sm" | "base" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "base" | "base" | The size of the button. |
shape | "normal" | "rounded" | "rounded" | The shape of the button. |
asChild | boolean | false | When true, the button will render as its child element instead of a button. |