Button

The action element. Variants align with the BTNG.Core Figma hierarchy: primary / accent / secondary / tertiary / ghost / destructive / link / linkGray. `default` and `outline` remain as aliases for back-compat.

$npx shadcn@latest add https://ui.btng.studio/r/button

Configurator

Every axis of the Button component in one view. Switch variant, size, state, and icon layout. The code block updates live.

variant=primary · size=default

<Button>
  Button CTA
</Button>

Primary

Forest fill. The main action on any surface. All five sizes: xs (32) · sm (36) · default=md (40) · lg (44) · xl (48). `default` is kept as an alias.

Accent

Lime fill. BTNG's contrast-CTA — pops against dark surfaces and against Forest siblings. (Figma: Primary Alt)

Secondary

White fill, brand-300 border. Low-emphasis action that still needs a button affordance.

Tertiary

Bordered, sand-on-hover. Low-stakes actions on content-heavy surfaces. `outline` is kept as an alias.

Ghost

Border-only. No fill at rest, no fill on hover — only the border and text darken. Keeps the underlying canvas visible.

Destructive

Red. Only for actions that remove, cancel, or delete.

Link

Type-styled action — brand-900 text, underline on hover. Use when a button is needed semantically but visually sits inside prose. `linkGray` is the muted sibling (brand-600).

Icon

Square button for icon-only actions. Pair with aria-label. Icons auto-size to 16px.

Loading

Pass the loading prop. The spinner replaces the leading slot, aria-busy flips on, and the button becomes non-interactive.

Disabled

Pointer events off, opacity 50% (shadcn convention).

Reasoning

BTNG has two brand colours. Forest is the primary. Lime is the contrast accent I reach for on hero CTAs, checkout buttons, and any action that needs to cut through a busy layout. Keeping both as first-class variants (default and accent) means the team doesn't have to reach for custom className overrides every time the design calls for a lime button.

Depth is a three-layer recipe ported from the Untitled UI reference: a whisper of outer drop, a 1px top highlight rim, and a 1px inner darker ring. Together they plant the button on the surface without pretending to be skeuomorphic.

Active state nudges 1px down. That tiny movement plants the button into the press and makes the click feel registered on touch devices while a network request is in flight.