Button

A composite button ported from Atlas — six variants, sm/md/xl sizes, iconBefore / iconAfter slots (any icon component), and a loading state — wired to the dry token stack. Corners use rounded-control: Washi is an 8px rect, ICS is a pill. Switch looks in the sidebar.

Sizes, icons, and states

Accessibility

• A 2px :focus-visible ring (never a bare :focus), offset so it clears the edge.
• outline-hidden keeps a real focus outline under Windows high-contrast (forced-colors).
• motion-reduce drops the transition; the loading spinner still conveys state.
• 44px minimum target on coarse pointers; defaults to type="button".

Usage

import { Plus } from '@phosphor-icons/react';
import { Button } from '@/components/ui/button';

<Button>Click me</Button>
<Button size="xl" variant="secondary" iconBefore={Plus}>New</Button>
<Button loading>Saving</Button>
<Button asChild>
  <a href="/docs">As a link</a>
</Button>

Install

shadcn add @gesso/button