block · toolbar

Toolbar

A neutral responsive action-group layout; composite focus behavior remains application-owned.

Install with npx @madojs/ui@latest add toolbar.

Block

Composition

Arrange a visible label and groups of independent native controls in the wrapping neutral surface.

Public API

class mado-ui-toolbar / label / group: Presentational toolbar layout.
attribute data-align="end": Pushes one control group toward the logical end when space allows.

Detected public classes

.mado-ui-toolbar
.mado-ui-toolbar-group
.mado-ui-toolbar-label

Detected public CSS properties

Accessibility contract

The recipe intentionally adds no toolbar role or merged-control semantics.
Add role="toolbar" only with a complete application-owned accessible name and roving-focus keyboard model; otherwise native Tab order is correct.

Keyboard

The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Mado UI theme theme

Resolved install order

Mado UI theme theme

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.

blocks/toolbar/mado-ui-toolbar.css {styles}/mado-ui-toolbar.css