Button

Overview

The Button component lives in @flatpay-dk/ui and mirrors the canonical Figma matrix. Six variants (primary, secondary, tertiary, transparent, success, danger), three sizes (sm, md, lg), four icon configurations (none, leading, trailing, icon-only), and six visible states. State styling is handled natively via CSS pseudo-classes — no JavaScript hover state, no animation orchestration.

Variants

Six variants, each tied to a specific role in the action hierarchy. Color earns its place by communicating the role — Flatpay has no brand hue, so primary is charcoal, not blurple.

Variants × states

The full matrix: every variant rendered at every state. Held still here for review — interactive states (hover, active, focus) come for free on the real component.

Sizes

Three sizes. md is the default and covers most product UI. sm is for dense rows; lg is for marketing surfaces and login.

Icons

Four icon configurations. Icons sit at 16 px and inherit the button's text color via currentColor. Use leadingIcon / trailingIcon props rather than interleaving icons with text in children — the props guarantee correct gap and alignment.

Loading

When an action is in flight, loading={true} swaps the label for a spinner, disables the button, and sets aria-busy. The button keeps its width so the surrounding layout doesn't reflow mid-click.

Anatomy

Five named parts; the icon slots are optional. The container carries every variant, size, state, and focus-ring decision — never style the inner span directly.

Behavior

• 01Hover and active are color shifts only. No scale transform, no shadow, no glow. The state difference is read by the eye via tone, not motion.
• 02Transition is 150 ms ease-out. Fast enough that hover feels instant; slow enough that you notice the press. No bounce, no elastic.
• 03Focus ring is keyboard-only. :focus-visibleshows the ring; mouse clicks do not. Don't override.
• 04Loading disables the button. The button still receives focus (so screen readers announce aria-busy) but ignores clicks. Don't fire the action twice.
• 05Width is reserved on loading. The label is replaced by a spinner of equal weight; the page never reflows.

Accessibility

• Always include accessible text. For icon-only buttons, set aria-label. For label-with-icon buttons, the icon should be aria-hidden (the prop slots handle this automatically).
• Keyboard: activates on Enter and Space — native button behavior. Don't hijack with custom key handlers.
• Disabled vs. unavailable: use the native disabled attribute to remove from the tab order; use aria-disabled="true" if the button must remain discoverable (e.g., to surface a tooltip explaining why).
• Contrast: every variant ships with WCAG AA contrast at the default state. Hover and active deepen the background; the foreground stays constant.
• Destructive actions (the danger variant) should always announce the consequence — body copy nearby, a confirmation dialog, or an undo affordance. The variant alone is not consent.

Code

Import from @flatpay-dk/ui. Every standard button HTML attribute (onClick, type, aria-*,formAction) passes through.

import { Button } from "@flatpay-dk/ui";

// Default — primary, md
<Button onClick={handleRun}>Run prototype</Button>

// Variant + size
<Button variant="secondary" size="sm">Open repo</Button>

// Leading icon — pair with the slot prop, not inline
<Button leadingIcon={<PlusIcon />}>Create prototype</Button>

// Trailing icon
<Button trailingIcon={<ArrowRightIcon />}>Continue</Button>

// Icon-only — always pair with aria-label
<Button iconOnly aria-label="Close">
  <CloseIcon />
</Button>

// Loading state — keeps width, disables clicks
<Button loading={isPending}>Submit</Button>

// Destructive action — pair with a confirm step
<Button variant="danger" onClick={archive}>Archive prototype</Button>

Best practices

The button is the most-used component in the product. Small habits compound across screens.

Props

Related