Component

Button

Triggers an action or navigates. All buttons are pill-shaped via --radius-button. Nine variants across three sizes, including two frosted glass variants for use over photography.

Standard Variants

tsx
<Button variant="default">Default</Button>             {/* black fill — primary CTA */}
<Button variant="outline">Outline</Button>             {/* foreground border — secondary */}
<Button variant="outline-muted">Outline Muted</Button> {/* hairline border — tertiary */}
<Button variant="ghost">Ghost</Button>                 {/* no border — inline/nav */}
<Button variant="accent">Accent</Button>               {/* electric blue fill */}
<Button variant="muted">Muted</Button>                 {/* surface fill */}
<Button variant="destructive">Destructive</Button>

Frosted Glass — Over Photography Only

frosted — over dark images

frosted-dark — over light images

tsx
{/* frosted — dark glass + white text. Use over dark/moody photography. */}
<Button variant="frosted" asChild>
  <Link href="/work">View All Work</Link>
</Button>

{/* frosted-dark — light glass + ink text. Use over bright/airy photography. */}
<Button variant="frosted-dark" asChild>
  <Link href="/work">View All Work</Link>
</Button>

Sizes

tsx
<Button size="sm">Small</Button>    {/* h-8  px-4  text-[11px] */}
<Button size="md">Medium</Button>  {/* h-10 px-5  text-[12px] (default) */}
<Button size="lg">Large</Button>   {/* h-12 px-7  text-[13px] */}
<Button size="icon">...</Button>   {/* h-10 w-10  no padding */}

As Link (asChild)

Default LinkOutline LinkGhost Link
tsx
import Link from 'next/link'

<Button asChild>
  <Link href="/work">View Work</Link>
</Button>

Disabled

Props

PropTypeDefaultDescription
variant"default" | "outline" | "outline-muted" | "ghost" | "accent" | "muted" | "destructive" | "frosted" | "frosted-dark""default"Visual style. Use frosted/frosted-dark only over photography.
size"sm" | "md" | "lg" | "icon""md"Controls height, padding, and font size.
asChildbooleanfalseRenders as child element (e.g. a Link) via Radix Slot.
disabledbooleanfalseDisables interaction and reduces opacity to 40%.
classNamestring—Additional Tailwind classes appended after variants.