Atoms / Button

Button

<Button />Stable

Trigger an action or event. Re-exports shadcn's Button — our brand identity lives in the token layer, not in custom variants.

import { Button } from "@/components/upnext";

Explorer

Cross every variant × size × content shape × state in one place. Hover any rendered button with inspect mode on to see its tokens.

Variant

Size

Content

State

<Button>
  Save changes
</Button>

Inspector

The single-button playground with token resolution per prop.

Preview

Code

import { Button } from "@/components/upnext";


<Button>Save changes</Button>

Variants

Pick a tab to swap the preview. The shadcn set, plus `white` (a light action chip for neutral / tinted surfaces) and `primary-soft` (a tonal brand tint).

import { Button } from "@/components/upnext";


export function Example() {
  // `primary` is the default — omit the prop and you get it.
  return <Button>Save changes</Button>;
}

Tone — solid CTA

The `tone` prop paints a solid colored action button from the tone's --{tone}-solid token (deep enough for AA white text in both themes). Each tab shows default · loading · disabled. Inside an Alert, a primary button adopts the alert's tone automatically.

import { Button } from "@/components/upnext";


export function Example() {
  // Solid CTA in the info tone (--info-solid = --info-600).
  return <Button tone="info">Notify staff</Button>;
}

Composition

Icon slots (data-icon=inline-start/end), icon-only sizes, disabled, loading, full-width.

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


export function Example() {
  return (
    <Button>
      <Mail data-icon="inline-start" />
      Email recruit
    </Button>
  );
}

Source

The wrapper is a thin re-export — the variant logic lives in components/ui/button.tsx (the shadcn primitive).