A row of controls that belong together: a formatting bar, a row of view switches, the actions over a table.
Import it from rei-kit/web:
import { BaseToolbar } from 'rei-kit/web'
Open BaseToolbar in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { Bold, Italic, Underline } from 'lucide-vue-next'
import { BaseButton, BaseSeparator } from 'rei-kit'
import { BaseToolbar } from 'rei-kit/web'
</script>
<template>
<BaseToolbar label="Formatting">
<BaseButton icon variant="ghost" aria-label="Bold"><Bold class="size-4" /></BaseButton>
<BaseButton icon variant="ghost" aria-label="Italic"><Italic class="size-4" /></BaseButton>
<BaseSeparator orientation="vertical" spacing="sm" />
<BaseButton icon variant="ghost" aria-label="Underline"
><Underline class="size-4"
/></BaseButton>
</BaseToolbar>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | The toolbar's accessible name, e.g. "Formatting". |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.