Moduix component library

API Reference

Original primitive API

Behavior, accessibility details, and low-level props are documented by Base UI.

Basic

import {  BellIcon,  Toolbar,  ToolbarButton,  ToolbarGroup,  ToolbarInput,  ToolbarLink,  ToolbarSeparator,} from "moduix";export function ToolbarDemo() {  return (    <Toolbar aria-label="Document actions">      <ToolbarGroup aria-label="History">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>      </ToolbarGroup>      <ToolbarSeparator />      <ToolbarInput aria-label="Search actions" placeholder="Search actions" />      <ToolbarButton aria-label="Notifications">        <BellIcon />      </ToolbarButton>      <ToolbarLink href="#">History</ToolbarLink>    </Toolbar>  );}

Full list of component variables available for project-level overrides.

Property	Default	Description
--toolbar-bg	var(--color-muted)	Controls toolbar background color.
--toolbar-border-color	var(--color-border)	Controls toolbar border color.
--toolbar-border-width	var(--border-width-sm)	Controls toolbar border width.
--toolbar-color	var(--color-foreground)	Controls toolbar text color.
--toolbar-control-bg-active	var(--color-accent)	Controls button active background.
--toolbar-control-bg-hover	var(--color-accent)	Controls button hover background.
--toolbar-control-bg-pressed	var(--color-background)	Controls pressed and open button background.
--toolbar-control-border-color-active	transparent	Controls active control border color.
--toolbar-control-border-width	var(--border-width-sm)	Controls toolbar button border width.
--toolbar-control-color	var(--color-foreground)	Controls button text color.
--toolbar-control-color-pressed	var(--color-foreground)	Controls pressed and open button text color.
--toolbar-control-gap	var(--spacing-2)	Controls spacing inside toolbar buttons.
--toolbar-control-height	var(--size-lg)	Controls base control height.
--toolbar-control-height-sm	var(--size-sm)	Controls small control height.
--toolbar-control-height-lg	var(--size-xl)	Controls large control height.
--toolbar-control-padding-x-lg	1rem	Controls large control horizontal padding.
--toolbar-control-padding-x-sm	0.625rem	Controls small control horizontal padding.
--toolbar-control-padding-x	0.75rem	Controls control horizontal padding.
--toolbar-control-radius	var(--radius-md)	Controls control corner radius.
--toolbar-disabled-opacity	var(--opacity-disabled)	Controls disabled control opacity.
--toolbar-focus-ring-color	var(--color-ring)	Controls keyboard focus ring color.
--toolbar-focus-ring-offset	-1px	Controls keyboard focus ring offset.
--toolbar-focus-ring-width	var(--border-width-md)	Controls keyboard focus ring width.
--toolbar-font-size-sm	var(--text-xs)	Controls small control font size.
--toolbar-font-size-lg	var(--text-md)	Controls large control font size.
--toolbar-font-size	var(--text-sm)	Controls base control font size.
--toolbar-font-weight	var(--weight-medium)	Controls control font weight.
--toolbar-gap	var(--border-width-sm)	Controls spacing between toolbar items.
--toolbar-group-gap	var(--spacing-1)	Controls spacing inside toolbar groups.
--toolbar-icon-size-sm	0.875rem	Controls small control icon size.
--toolbar-icon-size	1rem	Controls control icon size.
--toolbar-input-bg	var(--color-background)	Controls input background.
--toolbar-input-border-color	var(--color-border)	Controls input border color.
--toolbar-input-border-width	var(--border-width-sm)	Controls input border width.
--toolbar-input-color	var(--color-foreground)	Controls input text color.
--toolbar-input-focus-ring-offset	-1px	Controls input focus ring offset.
--toolbar-input-focus-ring-width	var(--border-width-sm)	Controls input focus ring width.
--toolbar-input-padding-x	0.75rem	Controls input horizontal padding.
--toolbar-input-placeholder-color	var(--color-muted-foreground)	Controls input placeholder color.
--toolbar-input-width-sm	8rem	Controls small toolbar input width.
--toolbar-input-width-lg	12rem	Controls large toolbar input width.
--toolbar-input-width	10rem	Controls input width.
--toolbar-line-height-sm	var(--line-height-text-xs)	Controls small control line height.
--toolbar-line-height-lg	var(--line-height-text-md)	Controls large control line height.
--toolbar-line-height	var(--line-height-text-sm)	Controls base control line height.
--toolbar-padding	0.125rem	Controls toolbar inner padding.
--toolbar-radius	var(--radius-lg)	Controls toolbar corner radius.
--toolbar-separator-color	var(--color-border)	Controls separator color.
--toolbar-separator-length-horizontal	100%	Controls horizontal separator length.
--toolbar-separator-length-vertical	1rem	Controls vertical separator length.
--toolbar-separator-margin-x-vertical	var(--spacing-1)	Controls vertical separator horizontal margin.
--toolbar-separator-margin-y-horizontal	var(--spacing-1)	Controls horizontal separator vertical margin.
--toolbar-separator-thickness	1px	Controls separator thickness.
--toolbar-separator-thickness-horizontal	var(--toolbar-separator-thickness)	Controls horizontal separator thickness.
--toolbar-separator-thickness-vertical	var(--toolbar-separator-thickness)	Controls vertical separator thickness.
--toolbar-transition	var(--transition-default)	Controls interactive transition timing.

Interactive variables scoped for docs preview without changing size scale tokens.

Property	Default	Description
--toolbar-bg	var(--color-muted)	Controls toolbar background color.
--toolbar-border-color	var(--color-border)	Controls toolbar border color.
--toolbar-color	var(--color-foreground)	Controls toolbar text color.
--toolbar-control-bg-active	var(--color-accent)	Controls button active background.
--toolbar-control-bg-hover	var(--color-accent)	Controls button hover background.
--toolbar-control-color	var(--color-foreground)	Controls button text color.
--toolbar-input-bg	var(--color-background)	Controls input background.
--toolbar-input-border-color	var(--color-border)	Controls input border color.
--toolbar-radius	var(--radius-lg)	Controls toolbar corner radius.
--toolbar-separator-color	var(--color-border)	Controls separator color.

Anatomy

Toolbar groups related controls into one keyboard navigation region. Use visible parts for actions, grouped actions, separators, inputs, and links.

Toolbar[aria-label]
├─ ToolbarGroup[aria-label]
│  └─ ToolbarButton
├─ ToolbarSeparator
├─ ToolbarInput
├─ ToolbarButton
└─ ToolbarLink

<Toolbar aria-label="Document actions">
  <ToolbarGroup aria-label="History">
    <ToolbarButton>Undo</ToolbarButton>
    <ToolbarButton>Redo</ToolbarButton>
  </ToolbarGroup>
  <ToolbarSeparator />
  <ToolbarInput aria-label="Search actions" placeholder="Search actions" />
  <ToolbarButton aria-label="Notifications">
    <BellIcon />
  </ToolbarButton>
  <ToolbarLink href="#">History</ToolbarLink>
</Toolbar>

Part	Role
`Toolbar`	Root toolbar region. Controls orientation, disabled state, visual `variant`, and control `size`.
`ToolbarGroup`	Groups related controls inside the toolbar and gives them a shared label when needed.
`ToolbarButton`	Toolbar-aware button. Compose it with `Toggle`, `SelectTrigger`, or another trigger via `render`.
`ToolbarInput`	Native input that participates in toolbar keyboard navigation.
`ToolbarLink`	Toolbar-aware anchor for related navigation or metadata links.
`ToolbarSeparator`	Visual separator. By default it uses the opposite orientation of the root toolbar.

Toolbar does not use portal-like service layers such as portal, positioner, backdrop, or viewport. All exported parts are visible composition slots, so style the root and parts directly with className or scoped CSS variables.

Composition

Use Toolbar for shared behavior and layout props: aria-label, orientation, disabled, variant, and size. Use ToolbarGroup when a subset of controls needs its own accessible name, and use ToolbarSeparator to divide unrelated groups.

ToolbarButton supports the Base UI render prop. This lets one element act as both a toolbar item and another interactive primitive, such as a Toggle or SelectTrigger, without nesting interactive elements.

<Toolbar aria-label="Text properties">
  <Select defaultValue="Inter">
    <ToolbarButton render={<SelectTrigger />} aria-label="Font family">
      <SelectValue />
      <SelectIcon>
        <ChevronUpDownIcon />
      </SelectIcon>
    </ToolbarButton>
    <SelectContent>
      <SelectList>
        {fonts.map((font) => (
          <SelectItem key={font} value={font}>
            <SelectItemIndicator />
            <SelectItemText>{font}</SelectItemText>
          </SelectItem>
        ))}
      </SelectList>
    </SelectContent>
  </Select>
</Toolbar>

Popup primitives rendered from toolbar buttons, such as SelectContent, own their internal portal and positioner behavior. Configure those slots on that popup component, not on Toolbar.

Examples

Toggle Group

Compose ToolbarButton with Toggle inside a ToggleGroup when toolbar items need pressed state.

import {  BellIcon,  StarIcon,  Toggle,  ToggleGroup,  Toolbar,  ToolbarButton,  ToolbarGroup,  ToolbarSeparator,} from "moduix";export function ToolbarToggleGroupDemo() {  return (    <Toolbar aria-label="Editor formatting">      <ToggleGroup multiple defaultValue={["bold"]} aria-label="Text formatting" variant="ghost">        <ToolbarButton render={<Toggle />} value="bold" aria-label="Bold">          <strong>B</strong>        </ToolbarButton>        <ToolbarButton render={<Toggle />} value="italic" aria-label="Italic">          <em>I</em>        </ToolbarButton>        <ToolbarButton render={<Toggle />} value="underline" aria-label="Underline">          <u>U</u>        </ToolbarButton>      </ToggleGroup>      <ToolbarSeparator />      <ToolbarGroup aria-label="Insert">        <ToolbarButton aria-label="Add favorite">          <StarIcon />        </ToolbarButton>        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </ToolbarGroup>    </Toolbar>  );}

Select And Input

Use the render prop to turn toolbar buttons into popup triggers, and keep inputs limited in horizontal toolbars.

import {  ChevronUpDownIcon,  Select,  SelectContent,  SelectIcon,  SelectItem,  SelectItemIndicator,  SelectItemText,  SelectList,  SelectTrigger,  SelectValue,  Toolbar,  ToolbarButton,  ToolbarInput,  ToolbarLink,  ToolbarSeparator,} from "moduix";export function ToolbarSelectInputDemo() {  return (    <Toolbar aria-label="Text properties">      <Select defaultValue="Inter">        <ToolbarButton render={<SelectTrigger />} aria-label="Font family">          <SelectValue />          <SelectIcon>            <ChevronUpDownIcon />          </SelectIcon>        </ToolbarButton>        <SelectContent>          <SelectList>            {fonts.map((font) => (              <SelectItem key={font} value={font}>                <SelectItemIndicator />                <SelectItemText>{font}</SelectItemText>              </SelectItem>            ))}          </SelectList>        </SelectContent>      </Select>      <ToolbarSeparator />      <ToolbarInput aria-label="Search actions" placeholder="Search actions" />      <ToolbarLink href="#">History</ToolbarLink>    </Toolbar>  );}

const fonts = ["Inter", "Arial", "Helvetica", "Georgia"];

Variants

Use variant to match the toolbar surface to the surrounding layout.

import { BellIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";export function ToolbarVariantsDemo() {  return (    <>      <Toolbar aria-label="Default toolbar">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>      <Toolbar aria-label="Outline toolbar" variant="outline">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>      <Toolbar aria-label="Ghost toolbar" variant="ghost">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>    </>  );}

Sizes

Use size to align toolbar controls with compact or roomy interfaces.

import { BellIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";export function ToolbarSizesDemo() {  return (    <>      <Toolbar aria-label="Small toolbar" size="sm">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>      <Toolbar aria-label="Medium toolbar" size="md">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>      <Toolbar aria-label="Large toolbar" size="lg">        <ToolbarButton>Undo</ToolbarButton>        <ToolbarButton>Redo</ToolbarButton>        <ToolbarSeparator />        <ToolbarButton aria-label="Notifications">          <BellIcon />        </ToolbarButton>      </Toolbar>    </>  );}

Vertical

Set orientation="vertical" for toolbars that stack controls in a column.

import { StarIcon, Toolbar, ToolbarButton, ToolbarSeparator } from "moduix";export function ToolbarVerticalDemo() {  return (    <Toolbar orientation="vertical" aria-label="Vertical tools">      <ToolbarButton>Move</ToolbarButton>      <ToolbarButton>Scale</ToolbarButton>      <ToolbarSeparator />      <ToolbarButton aria-label="Favorite">        <StarIcon />      </ToolbarButton>    </Toolbar>  );}

Disabled Controls

Disable individual toolbar controls when an action is visible but unavailable.

import {  BellIcon,  Toolbar,  ToolbarButton,  ToolbarInput,  ToolbarSeparator,} from "moduix";export function ToolbarDisabledControlsDemo() {  return (    <Toolbar aria-label="Disabled document actions">      <ToolbarButton>Undo</ToolbarButton>      <ToolbarButton disabled>Redo</ToolbarButton>      <ToolbarSeparator />      <ToolbarInput aria-label="Search disabled actions" placeholder="Search actions" disabled />      <ToolbarButton aria-label="Notifications" disabled>        <BellIcon />      </ToolbarButton>    </Toolbar>  );}

Custom Icons

Pass icons as children. Icon-only buttons must include an accessible label.

import { Toolbar, ToolbarButton } from "moduix";export function ToolbarCustomIconsDemo() {  return (    <Toolbar aria-label="Text alignment">      <ToolbarButton aria-label="Align left">        <AlignLeftIcon />      </ToolbarButton>      <ToolbarButton aria-label="Align center">        <AlignCenterIcon />      </ToolbarButton>      <ToolbarButton aria-label="Align right">        <AlignRightIcon />      </ToolbarButton>    </Toolbar>  );}function AlignLeftIcon() {  return (    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">      <path        d="M2.5 3.5h11M2.5 8h8M2.5 12.5h11"        stroke="currentColor"        strokeWidth="1.5"        strokeLinecap="round"      />    </svg>  );}function AlignCenterIcon() {  return (    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">      <path        d="M2.5 3.5h11M4 8h8M2.5 12.5h11"        stroke="currentColor"        strokeWidth="1.5"        strokeLinecap="round"      />    </svg>  );}function AlignRightIcon() {  return (    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">      <path        d="M2.5 3.5h11M5.5 8h8M2.5 12.5h11"        stroke="currentColor"        strokeWidth="1.5"        strokeLinecap="round"      />    </svg>  );}

Class Names

Pass className to the root and each part when styling with CSS Modules, Tailwind CSS, or CSS-in-JS.

import {  Toolbar,  ToolbarButton,  ToolbarInput,  ToolbarSeparator,} from "moduix";export function ToolbarClassNamesDemo() {  return (    <Toolbar aria-label="Schedule controls" className={styles.customToolbar}>      <ToolbarButton className={styles.customButton}>Day</ToolbarButton>      <ToolbarButton className={styles.customButton}>Week</ToolbarButton>      <ToolbarSeparator />      <ToolbarInput        aria-label="Filter schedule"        placeholder="Filter"        className={styles.customInput}      />    </Toolbar>  );}

.customToolbar {  --toolbar-bg: color-mix(in oklab, var(--color-primary) 7%, transparent);  --toolbar-border-color: color-mix(in oklab, var(--color-primary) 36%, var(--color-border));  --toolbar-gap: var(--spacing-1);  --toolbar-padding: var(--spacing-1);  --toolbar-radius: var(--radius-md);  --toolbar-control-bg-hover: color-mix(in oklab, var(--color-primary) 14%, transparent);  --toolbar-control-bg-pressed: var(--color-primary);  --toolbar-control-color-pressed: var(--color-primary-foreground);  --toolbar-separator-color: color-mix(in oklab, var(--color-primary) 42%, var(--color-border));}.customButton {  --toolbar-control-radius: var(--radius-sm);  --toolbar-control-padding-x: var(--spacing-3);}.customInput {  --toolbar-input-width: 8rem;}

Toolbar

On this page