Toolbar

Toolbars group formatting or view controls that affect a shared context, such as rich text editors, chart controls, or data tables.

Try it

Usage

Place toggle RuiButton children inside RuiToolbar. Enable exclusiveToggles when only one toggle can be active.

import { RuiToolbar } from '@ecopages/radiant-ui/toolbar';
import { RuiButton } from '@ecopages/radiant-ui/button';
 
<RuiToolbar label="Text formatting" exclusiveToggles>
  <RuiButton toggle pressed variant="ghost">Bold</RuiButton>
  <RuiButton toggle variant="ghost">Italic</RuiButton>
</RuiToolbar>

Exclusive toggles

Use exclusiveToggles for view modes where only one option (list vs grid) can be active at a time.

Theming

Toolbar surfaces map to semantic surface roles, never Tailwind palette steps:

Geometry shares control tokens (--size-control-*, --space-control-*) with RuiButton. Override roles at the theme layer, not in component CSS.

API

RuiToolbar is a custom element (<rui-toolbar>) rendering a role="toolbar" container. Place RuiButton toggles or other focusable controls as children.

Attributes

Slots

CSS classes

Public BEM classes on the composed surface (documented via @cssclass):

Pressed-toggle styling applies to rui-button--ghost / rui-button--outline inside the toolbar (see Button). Toggles expose their state via aria-pressed.

Theme roles

Accessibility

• Toolbar renders with role="toolbar" and an accessible name from label.
• Toggle buttons expose aria-pressed for their on/off state.
• Arrow keys move between toolbar items when focus is inside the toolbar.