Button

• primary — Saturated fill. Main call to action.
• secondary — Lighter background. Default priority.
• tertiary — Background-less at rest, fills on hover.
• quaternary — Text only, no background.

Three sizes (medium is default); only the padding changes, so the label keeps the same 15px size — readability stays constant while the hit area grows or shrinks.

Height comes from line-height (18px) plus vertical padding, which is calibrated for 15px font-size of TT Interphases to get visual vertical centering.

The icon-edge padding is the text-edge value minus 2px — an icon at an edge needs less breathing room than a glyph — so only the side a (leading or trailing) icon occupies is trimmed; the text side keeps the full padding. The gap between an icon and the label is 0.5ch at every size.

Need a different font size? Style the <a-button-label> directly — set its font-size and line-height, and (if the text then sits a little high) drop the 1px padding-bottom that optically centers Anta’s default font.

By default a button packs its content to the start, so when buttons share a width — a vertical menu, equal grid cells — their labels line up on a common left edge, which usually reads best in a list.

To center the label inside a wider button instead, set justify-content: center on it (the tones grid above does exactly this).

Pass icon alone — no label, no iconTrailing, no children — and the button collapses to a square. A min-size is pinned to a square matching the labeled-button height (24px / 28px / 32px for small / medium / large) so icon-only and labeled buttons line up, and a tight flex parent can’t clip the icon.

Icon-only buttons get an accessible name automatically — the wrapper sets aria-label={icon} so <Button icon="trash" /> ships with the name “trash”. Pass your own aria-label to override.

Children render after the label and before the trailing icon, so you can mix custom inline content — keyboard hints, badges, counters — with the prop-driven API.

Children also work without label — pass them as the only content.

• loading — diagonal stripe overlay slides across the button. Stripe color follows currentColor, so it tracks the tone. Blocks clicks via pointer-events: none.
• disabled — locks the colors to the disabled palette, sets pointer-events: none, and removes the button from the tab order. Beats inline --button-bg overrides.
• selected — toggled-on / pressed visual; shares the active state’s look. Useful for filter chips and icon toggles.

Form submission

For non-anchor buttons, type="submit" and type="reset" integrate with native forms. type="submit" calls form.requestSubmit() and also dispatches a submitdetailed event on the form with { formData, submitter: { tag, attrs } } in detail — handy for analytics or multi-button forms.

<form id="signup">
  <Button tone="brand" type="submit" label="Sign up" />
  <Button tone="brand" priority="tertiary" type="reset" label="Clear" />
</form>
{/* Associate with a form by id when the button is outside */}
<Button tone="neutral" type="submit" form="signup" label="Submit from outside" />

Custom click events

data-custom-event="<name>" makes the button dispatch a bubbling CustomEvent("<name>") on click. Use it to instrument analytics without taking ownership of onClick.

<Button tone="brand" label="Save" data-custom-event="save-clicked" />