Usage

Toolbar is a role="toolbar". label is required. start, center, and end are three groups. Arrow keys move focus across them, and Home and End jump to the ends. While an input is being edited, arrows stay with the caret until it reaches the edge of the field.

Hand overflow to OverflowList. Extra actions go into a More menu. The toolbar itself does not measure width.

<script setup lang="ts">
import { Toolbar } from '@astryx-vue/core/Toolbar'
</script>

<template>
  <Toolbar label="Formatting">
    <template #start>
      <button type="button">
        Bold
      </button>
      <button type="button">
        Italic
      </button>
    </template>
  </Toolbar>
</template>

Anatomy

Element	Description
Outer chrome	Section-owned container that supplies the toolbar surface, padding, and selected divider edges.
Toolbar	Named toolbar row that owns toolbar semantics and the start, optional center, and end layout.

Best practices

Guidance	Practice
Do	Name the toolbar for its job, for example “Formatting”.
Do	Put a long set of actions in an OverflowList instead of letting buttons wrap out of the bar.
Avoid	Do not nest a toolbar inside a toolbar. Arrow keys stop at the inner boundary.

Examples

Bulk Actions

3 selected

Select all rows	Name	Status	Role
Select Alex Johnson	Alex Johnson	Active	Admin
Select Sam Rivera	Sam Rivera	Active	Editor
Select Jordan Lee	Jordan Lee	Invited	Viewer
Select Taylor Kim	Taylor Kim	Active	Editor
Select Casey Park	Casey Park	Active	Viewer

After a multi-select, the count stays at the start and batch actions stay at the end.

Card Header

Card title

The card title sits on the left. Icon actions sit on the right.

Sizes

Small

Medium

Large

Small, medium, and large side by side. Size cascades to the buttons inside.

Table Filter

Search jobs

Status

Priority

Customer

5 of 5

Job	Customer	Status	Priority
VAV zones not cooling	Northgate Dental	In progress	High
Exhaust fan noise	Riverside Club	On hold	Normal
Humidifier board fault	Summit Medical	Overdue	High
Economizer stuck shut	Northgate Dental	Scheduled	Normal
Contactor replacement	Harborview Hotel	Completed	Low

Search leads the row. Status, priority, and customer sit beside it, with a live result count.

Tab Navigation

Tabs sit in the start group. One action sits at the end.