ToolbarButton

The quiet button of agent toolbars, with an icon and optional text. Pick it inside a TerminalBar or a pane header; use Button elsewhere.

ToolbarButton

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ToolbarButton

Dark theme, ToolbarButton

High contrast theme, ToolbarButton

UsageLink to the section Usage

tsx

import { ToolbarButton } from '@skribly/ui/agents'

tsx

<ToolbarButton label={t('attach')} icon={<Paperclip />} onPress={attach} />
<ToolbarButton label={t('remote')} pendingLabel={t('starting')} isPending={busy} icon={<Smartphone />}>Remote</ToolbarButton>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Icon-only buttons take label as their name and show it as a tooltip on hover and focus.
With visible text, the label is read first and the visible words stay in the name.
Pending swaps the icon for a spinner and reads pendingLabel.
Active adds a tint; pair it with a word or an icon change.
24px minimum target, a visible ring for keyboard focus and a border in forced colours.

This demo runs through axe in all three themes on every test run. See what the tests check.