Components

Button

The brand's action primitive — five variants from solid contrast to ghost.

Preview

components/core/Button.jsx

Usage

src/components/ui/Button.tsx

tsx

import { Button } from "@/components/ui/Button";
import { Mail } from "lucide-react";

<Button variant="glass" iconLeft={<Mail size={16} />}>
  Get in touch
</Button>

<Button variant="accent" size="lg" fullWidth>
  Read the article
</Button>

API

props

Prop	Type	Default	Description
variant	"primary" \| "glass" \| "secondary" \| "ghost" \| "accent"	"primary"	primary = solid contrast pill · glass = charcoal that lifts to glass on hover (the hero/work CTA) · secondary = hairline outline · ghost = text-only · accent = filled with the active domain accent.
size	"sm" \| "md" \| "lg"	"md"	Padding and font-size step.
disabled	boolean	false	Dims to 0.4 opacity and blocks the hover state.
iconLeft / iconRight	ReactNode	—	Inline SVG glyphs (stroke 2, currentColor) beside the label.
fullWidth	boolean	false	Stretch to the container width.
type	"button" \| "submit" \| "reset"	"button"	Native button type.

Tokens consumed

semantic only

--surface-contrast--on-contrast--color-bg-elevated--color-bg-hover--color-border--color-border-hover--color-border-glass--accent--accent-on--radius-pill--shadow-card-hover--transition-hover