Toolbar

Start / center / end bar

A row of related controls — formatting buttons, view switches, a filter bar — with start, centre and end slots. It is one Tab stop: arrow keys move between its controls, which keeps a long row from swallowing the Tab key.

Basic

MK

<script setup lang="ts">
import { BlessButton, BlessInput, BlessToolbar, BlessSeparator, BlessAvatar } from "blessing-ui";
</script>

<template>
  <BlessToolbar label="Editor">
    <template #start>
      <BlessButton size="sm">New</BlessButton>
      <BlessButton size="sm" variant="outline">Open</BlessButton>
      <BlessSeparator orientation="vertical" style="height: 24px" />
      <BlessButton size="sm" variant="ghost">Share</BlessButton>
    </template>
    <template #center
      ><BlessInput size="sm" placeholder="search…" aria-label="Search" style="width: 220px"
    /></template>
    <template #end><BlessAvatar name="Megumi Kato" size="sm" /></template>
  </BlessToolbar>
</template>

• ← / → move between controls, Home / End jump, and right-to-left pages reverse the arrows. Give it a label so the group has a name.
• For a single row of buttons that belong together visually but aren't a tool set, ButtonGroup.

Usage

import { BlessToolbar } from "blessing-ui";

API

Props

Name	Type	Default	Description
label	string	"Toolbar"
surface	"none" | "surface" | "bg"	"surface"

Slots

Name	Scope	Description
start	—
center	—
default	—
end	—