Components / Actions

Toolbar

A roving-focus group for buttons, links, separators, and toggle groups.

Preview

Install

Run in your project

npx @getweini/cli@latest add toolbar

Use cases

Document commands

Group frequent editing commands into one keyboard navigation region.

Mixed controls

Combine command buttons, separators, and navigation links.

Usage example

Vue

<Toolbar aria-label="Editor tools">
  <ToolbarButton>Undo</ToolbarButton>
  <ToolbarSeparator />
  <ToolbarButton>Redo</ToolbarButton>
</Toolbar>

More examples

Editor toolbar

Arrow keys travel between enabled toolbar controls.

Editor toolbar

<script setup lang="ts">
import Toolbar from './components/ui/toolbar/Toolbar.vue'
import ToolbarButton from './components/ui/toolbar/ToolbarButton.vue'
import ToolbarSeparator from './components/ui/toolbar/ToolbarSeparator.vue'
</script>
<template>
  <Toolbar aria-label="Editor commands">
    <ToolbarButton @click="$emit('undo')">Undo</ToolbarButton>
    <ToolbarButton @click="$emit('redo')">Redo</ToolbarButton>
    <ToolbarSeparator />
    <ToolbarButton @click="$emit('save')">Save</ToolbarButton>
  </Toolbar>
</template>

Actions and link

A ToolbarLink keeps native link navigation.

Actions and link

<script setup lang="ts">
import Toolbar from './components/ui/toolbar/Toolbar.vue'
import ToolbarButton from './components/ui/toolbar/ToolbarButton.vue'
import ToolbarLink from './components/ui/toolbar/ToolbarLink.vue'
</script>
<template>
  <Toolbar aria-label="Project controls">
    <ToolbarButton variant="ghost" @click="$emit('refresh')">Refresh</ToolbarButton>
    <ToolbarLink href="/projects/history" variant="ghost">History</ToolbarLink>
  </Toolbar>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Toolbar
Name	Type	Default or requirement
`orientation`	horizontal \| vertical	horizontal
`dir`	ltr \| rtl	inherited
`disabled / loop`	boolean	false / true

Arrow keys follow orientation and direction; Home and End reach the edges and disabled controls are skipped.

Implementation notes

The toolbar offers one tab stop; arrows, Home, and End move among enabled children.
ToolbarToggleGroup integrates an existing ToggleGroup while preserving its internal arrow behavior.

Accessibility and localization

Use a specific aria-label for each toolbar.
An icon-only child still needs an application-provided accessible name.