COMPONENTS

Toolbars

One toolbar class arranges related native actions and allows them to wrap. Controls inherit their existing button and form styling.

Usage

Markup: .toolbar

Behaviour: No ARIA toolbar arrow-key management is added.

Use role="group" with a descriptive name for this CSS-only pattern. Each control remains a normal Tab stop. Do not add role="toolbar" without implementing its expected arrow-key focus behavior.
Use links for destinations and buttons for application actions. Native disabled works as usual. Name icon-only buttons explicitly.
Gap and density inherit. The wrapper paints no extra surface; combine it with card when a surface is useful.

Component API and styling module · Inherited appearance settings

A group of actions

The labelled group explains why these controls belong together.

<div class="toolbar" role="group" aria-label="Project actions">
  <button type="button">Create project</button>
  <button type="button" class="secondary">Export</button>
  <button type="button" disabled>Archive selected</button>
</div>

Related destinations

Ordinary links keep navigation semantics inside a labelled action group.

<div class="toolbar" role="group" aria-label="Documentation shortcuts" data-gap="small">
  <a class="button" href="/RevaCSS/guide/">Get started</a>
  <a class="button secondary" href="/RevaCSS/attributes/">Shared settings</a>
  <a class="button outline" href="/RevaCSS/icons/">SVG icons</a>
</div>