Button

Pill button — the canonical Cronwerk action control. Pills only, in four variants and three sizes.

stable

Overview

The Button is a pill control — always fully rounded (--radius-chip: 9999px), never a rounded rectangle. It is the canonical starting point for the design language and the first component documented with the standard page template.

import { Button } from "@cronwerk/ui";

Use it for any discrete action: submit a form, open a dialog, confirm a choice. Pair actions with ButtonGroup when they belong together (e.g. Cancel / Save).

Examples

Variants source

<Button variant="solid-accent">Primary</Button>
<Button variant="solid-white">On orange</Button>
<Button variant="outline">Outline</Button>
<Button variant="translucent">Translucent</Button>

Sizes source

<Button size="nav">Nav</Button>
<Button size="default">Default</Button>
<Button size="hero">Hero</Button>

Docs link

Link button source

<Button as="a" href="/components/button">Docs link</Button>

Button groups source

<ButtonGroup>
<Button variant="outline">Cancel</Button>
<Button variant="solid-accent">Save</Button>
</ButtonGroup>

Props

Generated from the component’s TypeScript types — never hand-written.

Prop	Type	Default	Description
as	`keyof JSX.IntrinsicElements (default "button")`	`button`	Element type to render (e.g. "a" for link-as-button).
variant	`"solid-accent" \| "solid-white" \| "outline" \| "translucent"`	`solid-accent`	Visual variant.
size	`"nav" \| "default" \| "hero"`	`default`	Padding scale.
iconStart	`ReactNode`	—	Leading icon slot (decorative, rendered aria-hidden).
iconEnd	`ReactNode`	—	Trailing icon slot (decorative, rendered aria-hidden).
loading	`boolean`	`false`	Show the spinner, set aria-busy, and suppress clicks.

Usage

Do

Use a single solid-accent button as the primary action and de-emphasise secondary actions with outline.

Don't

Don’t mix three solid-accent buttons in one row — without hierarchy every action looks equally important.

Do

Reach for size="hero" on marketing or empty-state CTAs where the action deserves weight.

Don't

Don’t use size="nav" outside a dense navigation bar — it opts out of the 44px touch-target floor and is too small for body content.

Accessibility

Buttons expose a real <button> element with a visible 2px accent focus ring (flipping to white inside an accent Panel). As a link via as="a", the author is responsible for the target’s semantics — keep href present and meaningful. The default type="button" prevents accidental form submission.