Components / Button

Button

Any click action: submits, confirmations, toolbar controls. Text-only or icon-only; the label says exactly what happens.

import { Button } from '@layers/ui/button'

Rendered stock

House rules

  • Icons on buttons are the exception, not the default (refined 2026-07-08): allowed on CREATE buttons (Plus), route/navigation buttons, and primary-action-dispatch buttons. Everything else is text-only, or icon-only with size="icon" and an aria-label.
  • Toolbar controls are uniformly 32px: size="sm" on every control inside a toolbar.
  • The toolbar create/primary action is the default variant at size="sm" with its glyph at className="size-3.5" (Plus on "Add creative" / "Create Content" / "Add keyword"), anchored to the toolbar's right side.
  • Mutations get an explicit Save button; never an optimistic save.
  • Pending state is the loading prop: the spinner replaces the label at the button’s exact size and the button disables. Never render a spinner beside "Saving…" text (founder ruling 2026-07-08).