Toolbar

Accessible, unstyled WAI-ARIA toolbar with native actions and roving focus.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { Toolbar, ToolbarItem } from "@vizejs/ui/toolbar";

Or copy the source into your project with vize lib pull toolbar (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Labelled editor toolbar with roving focus that reports which action was pressed. -->
<script setup lang="ts">
import { ref } from "vue";

import { Toolbar, ToolbarItem } from "@vizejs/ui/toolbar";

const lastAction = ref("none");
</script>

<template>
  <div>
    <Toolbar aria-label="Document actions" @press="(value) => (lastAction = value)">
      <ToolbarItem value="save">Save</ToolbarItem>
      <ToolbarItem value="duplicate">Duplicate</ToolbarItem>
      <ToolbarItem value="publish" disabled>Publish</ToolbarItem>
    </Toolbar>
    <output>Last action: {{ lastAction }}</output>
  </div>
</template>

API

Toolbar

Source: src/families/actions/toolbar/toolbar.vue

Props

Events

Slots

Exposed

ToolbarItem

Source: src/families/actions/toolbar/toolbar-item.vue

Props

Events

Slots

Exposed

Behavior

Every row is proven by a mounted-DOM, SSR/hydration, renderer, type, size, or tree-shaking gate. A row without a passing test is a bug in the family contract.

Contract

Toolbar is a headless compound primitive for clustered actions such as editor controls, document commands, and inspector panels. It owns no selection model and emits no visual CSS. Consumers style through data-vize-ui, data-state, data-disabled, data-orientation, data-roving-focus, data-value, part, and --vize-ui-toolbar-orientation.

The root always renders role="toolbar". Items are native <button type="button"> controls by default, and non-native targets receive explicit button semantics plus Enter/Space activation. Roving focus is enabled by default so the toolbar has a single tab stop; consumers can set rovingFocus=false when native per-control tab stops are required.

Items require a unique string value so item-level and toolbar-level press events, activeValue, roving tabindex, and focusValue() stay stable across polymorphic rendering, slot changes, and DOM reordering. Duplicate values throw VIZE_UI_TOOLBAR_VALUE_DUPLICATE during registration or reactive value changes before more than one item can own the active tab stop.