Toolbar

Overview

Use Toolbar to group controls that act on the same surface.

Toolbars are useful in editors, tables, canvases, filters, and dashboards where several commands belong together.

Anatomy

A toolbar can contain buttons, toggles, toggle groups, separators, menus, and other compact controls.

Usage guidance

Keep the most common actions visible. Move less common actions into a menu when the toolbar becomes crowded.

Accessibility

Controls inside the toolbar still need labels and keyboard support. Keep focus order predictable.

Installation

npm

npx love-ui@latest add toolbar

Usage

import { Button } from "@/registry/default/ui/button"
import { Toggle } from "@/registry/default/ui/toggle"
import {
  Toolbar,
  ToolbarButton,
  ToolbarGroup,
  ToolbarSeparator,
} from "@/registry/default/ui/toolbar"

<Toolbar>
  <ToolbarGroup>
    <ToolbarButton render={<Toggle />}>Bold</ToolbarButton>
    <ToolbarButton render={<Toggle />}>Underline</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarButton render={<Button />}>Save</ToolbarButton>
</Toolbar>