Toolbar

A row of circular icon buttons, grouped and separated, that arrow keys move between. Built on Base UI’s Toolbar.

Installation

import { Toolbar } from "@o/pipeline/experimental/components/toolbar";

Usage

Every Toolbar.Button names itself with label, which is also its tooltip, followed by the shortcut keys, as a KbdCombo, when given. The buttons share one tooltip that moves between them, so reading along the row doesn’t wait out a fresh delay for each name. Pass pressed to make a button a toggle, or href to make it a link. To open a popup, pass its trigger as render, like <Menu.Trigger />, with collapsible and open for a caret; a collapsible button is a pill rather than a circle.

Editor.Bubble uses Toolbar for its floating formatting and link toolbar.