Button
Primary and secondary actions; renders as any element via the as prop.
import { Button } from "@ps1ui/core";Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="danger">Danger</Button>
<Button variant="ghost">Ghost</Button>Sizes
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Disabled
<Button disabled>Primary</Button>
<Button variant="secondary" disabled>Secondary</Button>
<Button variant="danger" disabled>Danger</Button>
<Button variant="ghost" disabled>Ghost</Button>As a link
<Button as="a" href="https://github.com/koki-develop/ps1ui">
View on GitHub
</Button>On the native button element, type defaults to "button" — a Button inside a form never submits implicitly. Pass type="submit" explicitly when the button should submit.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | ElementType | "button" | Element or component to render instead of the native <button> — e.g. "a" or a router Link. |
variant | "primary" | "secondary" | "danger" | "ghost" | "primary" | Visual style: "primary" for the main action, "secondary" for supporting actions, "danger" for destructive actions, "ghost" for chrome-free actions that only paint their label until hovered. |
size | "sm" | "md" | "lg" | "md" | Control size — affects font size, padding, and inline gap. |
Also accepts the attributes of the element rendered via as (default: <button>).