Button

Flat tinted fill by default; only the primary action is solid. Padding is block × φ inline.

Examples

aria-busy swaps the label for three pulsing squares; data-toggle flips aria-pressed.

`button.btn`	Any `<button>` or `<a>`. Use a link when it navigates, a button when it acts.
`i.icon`	Optional leading or trailing icon; the gap is set for you.

Attribute	Values	Description
`data-variant`	`primaryghost`	`primary` is the one solid action on a screen; `ghost` has no fill until hover. Default flat tint.
`data-size`	`sl`	Smaller or larger padding and type. Default sits between.
`data-tone`	`accentsuccesswarningdangerinfo`	Colours the primary fill, the ghost text and the pressed state.
`data-icon`	boolean	Square, icon-only button. Needs an `aria-label`.
`aria-busy`	`true`	Hides the label and pulses three squares in its place; the button ignores clicks.
`aria-pressed`	`truefalse`	Toggle state: tinted, with a 2px edge along the bottom so it reads without colour.
`data-toggle`	boolean	With `aria-pressed`, aequitas.js flips the state on click.
`disabled`	boolean	Dims and ignores the pointer. `aria-disabled="true"` looks the same but stays focusable.
`data-count`	`<n>`	Count badge in the corner, from the attribute's value. Works on any element.
`data-tip`	`<text>`	Tooltip text; see Tooltip.

Clicking a [data-toggle] button flips its aria-pressed between true and false. Everything else is CSS.

From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.

Use a real <button> (or <a href> for navigation) so focus, Enter and Space work without script.
Icon-only buttons need an aria-label; the icon itself is decorative.
aria-busy blocks the pointer but not focus. Keep the label in the markup: screen readers still announce it.
Tone never carries meaning alone: a danger button says what it does ("Delete", not "OK").

Key	Effect
`Enter` / `Space`	Activates a `<button>`. A link-button answers Enter only.