One-line: the Reckon action primitive — use it for every clickable action, and reach for \`render\` instead of styling an \`<a>\` yourself.

```jsx
<Button variant="default" size="default">Save changes</Button>
<Button variant="outline"><PlusIcon aria-hidden="true" />Add item</Button>
<Button variant="ghost" size="icon-sm" aria-label="More"><MoreHorizontalIcon /></Button>
```

Variants: \`default\` (solid neutral, one primary per view), \`secondary\` (4% wash), \`outline\` (bordered, for overlay triggers), \`ghost\` (toolbars, close buttons), \`link\`, \`destructive\`, \`destructive-outline\`.
Sizes step 24/28/32/36/40px on desktop; every size has a square \`icon-*\` twin.
Use \`loading\` rather than swapping the label — the width stays fixed.
Cancel/close buttons inside a Dialog footer use \`variant="ghost"\`, never \`outline\`.
