Toolbar

Toolbar renders a role="toolbar" wrapper and an optional item array for common editor-style command strips. Generated commands use roving focus; text inputs keep native editing keys and a normal tab stop.

Anatomy

• #default: Additional custom content inside the toolbar.
• #[item.slot]: Per-item render override when an item has a slot key.

Toolbar root, groups, buttons, links, inputs, labels, and separators are generated from items.

Usage

<script setup lang="ts">
import { computed, ref } from "vue";
import { Toolbar } from "akaza-ui";

const bold = ref(false);
const items = computed(() => [
  { label: "Bold", pressed: bold.value, onSelect: () => (bold.value = !bold.value) },
  { type: "separator" },
  { type: "link", label: "Help", href: "/help" },
]);
</script>

<template>
  <Toolbar :items="items" aria-label="Editor toolbar" />
</template>

Examples

Grouped commands

Use type: "group" for related commands inside the toolbar.

<template>
  <Toolbar
    :items="[
      { type: 'group', label: 'Alignment', children: [
        { label: 'Left', pressed: align === 'left', onSelect: () => (align = 'left') },
        { label: 'Center', pressed: align === 'center', onSelect: () => (align = 'center') },
      ] },
    ]"
  />
</template>

Custom item slot

Use slot on an item and render it with the matching named slot.

<template>
  <Toolbar :items="[{ label: 'Bold', slot: 'bold' }]">
    <template #bold="{ item }">
      <strong>{{ item.label }}</strong>
    </template>
  </Toolbar>
</template>

API Reference

Props

Emits

Slots

Item Shape

UI Options

Styling Hooks

Keyboard

Generated buttons and links use one roving tab stop. Text inputs remain native tab stops and keep Arrow/Home/End cursor behavior; toolbar navigation never hijacks their editing keys.