## Button
Trigger an action or navigation — the primary interactive control.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-button> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- variant: primary | secondary | tertiary | link | danger | success | positive | primary-alt | text | text-link, default secondary. tone × emphasis; one primary per view. success is a synonym of positive; primary-alt of primary; text / text-link are borderless label buttons
- size: sm | md | lg, default lg. 28 / 36 / 40px height — lg (40) is the default
- disabled: boolean, default false. non-interactive; grey fill
- loading: boolean, default false. shows a spinner, blocks clicks
- block: boolean, default false. full-width
- iconOnly: boolean (attr icon-only), default false. square, label-less; requires aria-label
- icon: slot, default —. leading glyph via <span slot="icon">; for icon-only, the glyph is the default child
Tokens: button-primary-bg, button-primary-bg-hover, button-primary-bg-press, button-primary-text, button-default-bg, button-default-border, button-danger-bg, button-ghost-bg-hover, button-positive-bg, button-disabled-bg, button-disabled-text, button-focus-ring, text-default, text-link, radius-xs, radius-default, focus.
Use when: primary (the single most important action on a view (one per screen)); secondary (the default for most actions — neutral, white with a border); tertiary / link (low-emphasis or inline navigation, no container weight); danger (a destructive action (delete, remove) — pair with a confirm); positive (a confirming/success action where a positive signal helps); icon-only (a compact action where the glyph is self-explanatory (close, more, add) — always give an aria-label).