Button

Interactive elements that trigger actions. Aurora ships three button primitives:

• Button — labelled action with optional icons
• IconButton — compact, icon-only trigger for toolbars and dense UI
• LinkButton — text-link styled button for inline navigation and secondary actions

Pick the variant by visual emphasis: primary for the dominant action, secondary for medium-weight alternates, tertiary for low-emphasis options, text for inline minimal-chrome calls.

Use specific verb-noun labels

"Save changes", "Export report", "Add building" beat vague "OK" or "Submit" — the label is the contract with the user about what will happen.

Variants

Choose by emphasis. As a rule, one primary button per view — multiple primaries make the dominant action ambiguous.

Variant	Use for
primary	The single most important action per view — Save, Submit, Export, Add.
secondary	Supporting actions that sit alongside a primary (e.g. "Cancel" beside "Save").
tertiary	Low-emphasis actions — neutral confirmations, dismissals.
text	Inline actions in dense UI (table rows, list items) where chrome would be noise.

<Button variant="primary">Save changes</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="tertiary">Skip for now</Button>
<Button variant="text">View details</Button>

Sizes

md is the default for standard contexts. Use sm inside dense UI — table rows, dropdowns, sidebars — where vertical rhythm matters more than tap-target generosity.

<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

States

<Button>Default</Button>
<Button disabled>Disabled</Button>
<Button loading>Loading</Button>
<Button danger>Danger</Button>

Reserve danger for irreversible actions

The danger state should only mark destructive, irreversible actions that the user is confirming — Delete account, Remove building permanently. Do not use it for routine deletions that can be undone. Always pair a danger button with a confirmation step.

Icons

Icons reinforce the action. Use leading icons for most actions; reserve trailing icons for navigation or expansion (e.g. chevron-right to indicate forward motion, arrow-up-right for external links).

<Button leading-icon="check">Confirm</Button>
<Button trailing-icon="chevron-right">Continue</Button>

No emoji, no double icons

Don't put icons on both sides of the label, and never use emoji as substitutes for icons — emoji rendering varies wildly across platforms and breaks the visual system.

Button — Props

Prop	Type	Default	Description
variant	'primary' | 'secondary' | 'tertiary' | 'text'	'primary'	Visual style. See variants table above for usage guidance.
size	'sm' | 'md' | 'lg'	'md'	Button height and padding.
disabled	boolean	false	Disable interactions and apply disabled styling.
danger	boolean	false	Destructive styling. Reserve for irreversible actions with a confirmation step.
loading	boolean	false	Show a spinner and apply loading styling; trailing icon is hidden.
leadingIcon	IconName	—	Icon shown before the slot content.
trailingIcon	IconName	—	Icon shown after the slot content.

Button — Slots

Slot	Description
default	Button label content.

---

IconButton

Compact icon-only trigger. Reach for it in space-constrained surfaces — toolbars, table row actions, dense panels — where a labelled button would crowd the layout. Outside those contexts, prefer a labelled Button so the action is self-evident.

When you do use one, the icon must be unambiguous on its own (or paired with a Tooltip), and the trigger needs an aria-label so screen readers announce the action.

<IconButton icon="settings" variant="primary" aria-label="Open settings" />
<IconButton icon="trash" variant="ghost" danger aria-label="Delete row" />

IconButton — Sizes

<IconButton icon="settings" size="sm" />
<IconButton icon="settings" size="md" />
<IconButton icon="settings" size="lg" />

IconButton — Props

Prop	Type	Default	Description
icon	IconName	required	Name of the icon to render.
variant	'primary' | 'secondary' | 'tertiary' | 'ghost'	'primary'	Visual style.
size	'sm' | 'md' | 'lg'	'md'	Button square edge length.
disabled	boolean	false	Disable interactions.
danger	boolean	false	Destructive styling. Reserve for irreversible actions.
loading	boolean	false	Replace icon with a spinner.

---

LinkButton

Looks like a text link, behaves like a button. Use inside paragraphs, table cells, banners, and navigation surfaces where a full Button would feel too heavy.

Use a real <a> for actual navigation

If activating the trigger should change the URL — opening a different page, deep-linking into the app — use an <a> tag, not LinkButton or Button. Buttons are for actions; anchors are for navigation. The two have different semantics for screen readers, the back button, middle-click, and copy-link behaviour.

<LinkButton size="sm">Small link</LinkButton>
<LinkButton size="md">Medium link</LinkButton>
<LinkButton size="lg">Large link</LinkButton>
<LinkButton disabled>Disabled link</LinkButton>

LinkButton — Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Text size.
disabled	boolean	false	Disable interactions.