Toolbar

A row of icon buttons on a tinted track, with hairline separators where groups change.

.toolbar aequitas.js

Examples

Toggles

A pressed button keeps its tint and bottom edge; data-toggle flips it on click.

Anatomy

`.toolbar`	Inline row on a flat tinted track.
`> .btn`	Buttons, usually `data-icon`. They have no fill until hovered, pressed or `aria-pressed="true"`.
`> hr`	Optional 1px vertical separator between groups of buttons.

API

Attribute	Values	Description
`aria-pressed`on `> .btn`	`truefalse`	Toggle buttons: the pressed one keeps its tint and edge. See Button.
`data-toggle`on `> .btn`	boolean	With `aria-pressed`, aequitas.js flips the state on click.

Behaviour

Clicking a .btn[data-toggle] in the toolbar flips its aria-pressed. Nothing else is scripted: there is no arrow-key focus movement between buttons.

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

Accessibility

Every icon-only button needs an aria-label.
Give the row role="group" and an aria-label. role="toolbar" promises arrow-key navigation, which aequitas.js does not provide; add it only with your own roving focus.
The <hr> is announced as a separator between groups.

Key	Effect
`Tab`	Moves to the next button. Each button is its own tab stop.
`Enter` / `Space`	Activates or toggles the focused button.