Buttons

Use Button across the site instead of inline button styles.

Variant guidance: primary for main actions, secondary for alternatives, transparent for low-visual-weight actions, and text for link-like actions.

<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="transparent">Back</Button>
<Button variant="text" href="/about">Learn more</Button>

Add an icon with the named icon slot, and choose placement with iconPosition (left or right).

For icon-only buttons, set iconOnly and always include aria-label so assistive tech has an accessible name. Icon-only supports primary, secondary, and transparent variants (not text).

<Button variant="primary" iconPosition="left">
  <svg slot="icon" ...>...</svg>
  Save
</Button>

<Button variant="secondary" iconPosition="right">
  Continue
  <svg slot="icon" ...>...</svg>
</Button>

<Button variant="secondary" iconOnly aria-label="Open settings">
  <svg slot="icon" ...>...</svg>
</Button>

<Button variant="transparent" iconOnly aria-label="Close panel">
  <svg slot="icon" ...>...</svg>
</Button>