All components

Button

Primary action trigger with six variants and three sizes.

Full API on ui.shadcn.com

Button outline variant uses bg-card

Stock shadcn sets outline buttons to bg-background. Against SE's card surfaces, that creates an awkward colour mismatch. Outline buttons now read bg-card instead.

Default

The primary action on a surface.

import { Button } from "@smaller-earth/ui"

export function Example() {
  return <Button>Save changes</Button>
}

Variants

Five visual treatments for different emphasis levels.

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Sizes

Three sizes for different contexts.

<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>

Disabled

Non-interactive, visually dimmed.

<Button disabled>Default</Button>
<Button variant="outline" disabled>Outline</Button>