Preview

Import

import { Button } from "@sigil-ui/components";

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
disabled attribute prevents focus and interaction
Focus ring uses --s-ring for visibility
Meets WCAG 2.1 contrast requirements with default tokens

On this page