Toolbar

Usage

Project content into start, center, end and secondary regions. Use wrap="wrap" when actions need to move onto additional lines on narrow screens. size controls dimensions, density adjusts spacing, and tone plus variant chooses the surface. Toolbar does not supply action handlers or arrow-key navigation.

Examples

Try the behavior and inspect the executable source in Code.

Try and configure

Change the options, try the result and inspect its generated template. Open Code for the full implementation.

<neu-toolbar
  size="md"
  density="normal"
  tone="neutral"
  variant="soft"
  wrap="wrap"
  [shadow]="false"
  [bordered]="false"
>
  <strong neu-toolbar-start>Orders</strong>
  <span neu-toolbar-center>Ready to process</span>
  <div neu-toolbar-end>
    <button
      neu-button
      size="sm"
      variant="solid"
      tone="brand"
      (neuClick)="count.update(increment)"
    >
      Export
    </button>
  </div>
</neu-toolbar>

Data and content

All seven Inputs configure layout and appearance. Toolbar has no Outputs; projected controls own their events. density uses compact, normal or relaxed, not the global data-neu-density vocabulary.

Accessibility and keyboard

Use native buttons and meaningful labels for the actions. Content follows ordinary Tab order. This layout does not implement an ARIA toolbar roving-focus pattern; avoid assigning that role without implementing its keyboard behavior.

API

Inputs and Outputs match the pinned Core package. Named types link to their definitions. Templates include executable examples for each supported region.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuDensity } from '@neural-ui/core';

// Public declaration (reference only)
type NeuDensity = 'compact' | 'normal' | 'relaxed';

import type { NeuToolbarSize } from '@neural-ui/core/toolbar';

// Public declaration (reference only)
export type NeuToolbarSize = 'sm' | 'md' | 'lg';

import type { NeuToolbarTone } from '@neural-ui/core/toolbar';

// Public declaration (reference only)
export type NeuToolbarTone = 'neutral' | 'brand' | 'success' | 'info' | 'warning' | 'danger';

import type { NeuToolbarVariant } from '@neural-ui/core/toolbar';

// Public declaration (reference only)
export type NeuToolbarVariant = 'solid' | 'soft' | 'ghost';

import type { NeuToolbarWrap } from '@neural-ui/core/toolbar';

// Public declaration (reference only)
export type NeuToolbarWrap = 'nowrap' | 'wrap';

Styles and tokens

Use public tokens for surfaces, text, spacing and focus. Test your content in both themes and at narrow widths.

Related components

Combine these components to build the surrounding interface.

• Tabs
• Panel