Button
A polymorphic button with token-driven variants, sizes, and states. Supports asChild via Radix Slot for polymorphism.
Import
import { Button } from "@sigil-ui/components";Preview
Variants
All nine variants read their colors from your --s-* token file.
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="soft">Soft</Button>
<Button variant="link">Link</Button>Sizes
<Button size="xs">Extra small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>Icon buttons
Use icon-* sizes for square icon-only buttons.
<Button size="icon-sm">
<PlusIcon className="size-4" />
</Button>As a link
Using the asChild prop, Button renders as whatever element you pass as a child — Next.js <Link>, React Router <Link>, or a plain <a>.
import Link from "next/link";
<Button asChild variant="primary">
<Link href="/dashboard">Go to dashboard</Link>
</Button>Disabled
<Button disabled>Disabled primary</Button>Token integration
Button reads these CSS variables from your token file — change once, every Button updates:
| CSS Variable | Used for |
|---|---|
--s-primary | variant="primary" background |
--s-primary-hover | Primary hover state |
--s-surface | variant="secondary" background |
--s-text | Default text color |
--s-border | variant="outline" border |
--s-ring | Focus ring color |
--s-radius-sm / --s-radius-md | Border radius by size |
--s-shadow-sm | Primary variant elevation |
--s-duration-fast | Hover/press transition |
--s-error | variant="destructive" background |
--s-success | variant="success" background |
--s-warning | variant="warning" background |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "outline" | "destructive" | "success" | "warning" | "soft" | "link" | "primary" | Visual variant |
size | "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "md" | Button size |
asChild | boolean | false | Render as child element (via Radix Slot) |
disabled | boolean | false | Disable interactions |
className | string | — | Additional CSS classes |
children | ReactNode | — | Button content |
Plus all standard <button> HTML attributes.
Accessibility
- Uses native
<button>element by default disabledattribute prevents focus and interaction- Focus ring uses
--s-ringfor visibility - Meets WCAG 2.1 contrast requirements with default tokens