Toolbar

A container for interactive controls with toolbar semantics (role="toolbar").

Import

import { AvToolbarComponent } from '@avesra/angular';

Usage

Wrap controls in av-toolbar and always provide aria-label when there is no visible label.

import { Component } from '@angular/core';
import { AvButtonGroupImports, AvSeparatorImports, AvToggleButtonGroupImports, AvToolbarComponent } from '@avesra/angular';

@Component({
  selector: 'app-toolbar-basic-demo',
  imports: [AvToolbarComponent, AvToggleButtonGroupImports, AvSeparatorImports, AvButtonGroupImports],
  template: `<av-toolbar aria-label="Text formatting">
      <av-toggle-button-group selection-mode="multiple">
        <button av-toggle-button value="bold" icon-only aria-label="Bold">B</button>
        <button av-toggle-button value="italic" icon-only aria-label="Italic">
          <span av-toggle-button-group-separator></span>
          I
        </button>
        <button av-toggle-button value="underline" icon-only aria-label="Underline">
          <span av-toggle-button-group-separator></span>
          U
        </button>
      </av-toggle-button-group>
      <hr av-separator />
      <av-button-group>
        <button av-button variant="secondary" icon-only aria-label="Copy">C</button>
        <button av-button variant="secondary" icon-only aria-label="Cut">
          <span av-button-group-separator></span>
          X
        </button>
      </av-button-group>
    </av-toolbar>`,
})
export class ToolbarBasicDemo {
}

Anatomy

Separate control groups with av-separator. Toolbar sets separator orientation automatically based on toolbar layout.

<av-toolbar aria-label="Formatting">
  <button av-button variant="ghost" size="sm">Bold</button>
  <div av-separator orientation="vertical"></div>
  <button av-button variant="ghost" size="sm">Italic</button>
</av-toolbar>

Vertical

Set orientation="vertical" for a stacked control column.

import { Component } from '@angular/core';
import { AvButtonGroupImports, AvSeparatorImports, AvToggleButtonGroupImports, AvToolbarComponent } from '@avesra/angular';

@Component({
  selector: 'app-toolbar-vertical-demo',
  imports: [AvToolbarComponent, AvToggleButtonGroupImports, AvSeparatorImports, AvButtonGroupImports],
  template: `<av-toolbar aria-label="Tools" orientation="vertical">
      <av-toggle-button-group selection-mode="multiple" orientation="vertical">
        <button av-toggle-button value="bold" icon-only aria-label="Bold">B</button>
        <button av-toggle-button value="italic" icon-only aria-label="Italic">
          <span av-toggle-button-group-separator></span>
          I
        </button>
        <button av-toggle-button value="underline" icon-only aria-label="Underline">
          <span av-toggle-button-group-separator></span>
          U
        </button>
      </av-toggle-button-group>
      <hr av-separator />
      <av-button-group>
        <button av-button variant="secondary" icon-only aria-label="Undo">↶</button>
        <button av-button variant="secondary" icon-only aria-label="Redo">
          <span av-button-group-separator></span>
          ↷
        </button>
      </av-button-group>
    </av-toolbar>`,
})
export class ToolbarVerticalDemo {
}

Attached

Set attached for a surface background with full rounding — ideal for floating toolbars over content.

import { Component } from '@angular/core';
import { AvButtonGroupImports, AvSeparatorImports, AvToggleButtonGroupImports, AvToolbarComponent } from '@avesra/angular';

@Component({
  selector: 'app-toolbar-attached-demo',
  imports: [AvToolbarComponent, AvToggleButtonGroupImports, AvSeparatorImports, AvButtonGroupImports],
  template: `<av-toolbar aria-label="Attached toolbar" attached>
      <av-toggle-button-group selection-mode="multiple">
        <button av-toggle-button value="bold" icon-only aria-label="Bold">B</button>
        <button av-toggle-button value="italic" icon-only aria-label="Italic">
          <span av-toggle-button-group-separator></span>
          I
        </button>
        <button av-toggle-button value="underline" icon-only aria-label="Underline">
          <span av-toggle-button-group-separator></span>
          U
        </button>
      </av-toggle-button-group>
      <hr av-separator />
      <av-button-group>
        <button av-button variant="secondary" icon-only aria-label="Copy">C</button>
        <button av-button variant="secondary" icon-only aria-label="Cut">
          <span av-button-group-separator></span>
          X
        </button>
      </av-button-group>
    </av-toolbar>`,
})
export class ToolbarAttachedDemo {
}

With ButtonGroup

Compose toolbars with ButtonGroup for related actions.

import { Component } from '@angular/core';
import { AvButtonGroupImports, AvSeparatorImports, AvToggleButtonGroupImports, AvToolbarComponent } from '@avesra/angular';

@Component({
  selector: 'app-toolbar-with-button-groups-demo',
  imports: [AvToolbarComponent, AvToggleButtonGroupImports, AvSeparatorImports, AvButtonGroupImports],
  template: `<av-toolbar aria-label="Editor toolbar">
      <av-button-group>
        <button av-button variant="secondary">↶ Undo</button>
        <button av-button variant="secondary">
          <span av-button-group-separator></span>
          ↷ Redo
        </button>
      </av-button-group>
      <hr av-separator />
      <av-toggle-button-group selection-mode="multiple">
        <button av-toggle-button value="bold" icon-only aria-label="Bold">B</button>
        <button av-toggle-button value="italic" icon-only aria-label="Italic">
          <span av-toggle-button-group-separator></span>
          I
        </button>
        <button av-toggle-button value="underline" icon-only aria-label="Underline">
          <span av-toggle-button-group-separator></span>
          U
        </button>
      </av-toggle-button-group>
      <hr av-separator />
      <av-button-group>
        <button av-button variant="secondary" icon-only aria-label="Align left">L</button>
        <button av-button variant="secondary" icon-only aria-label="Align center">
          <span av-button-group-separator></span>
          C
        </button>
        <button av-button variant="secondary" icon-only aria-label="Align right">
          <span av-button-group-separator></span>
          R
        </button>
      </av-button-group>
    </av-toolbar>`,
})
export class ToolbarWithButtonGroupsDemo {
}

Customization

Tailwind CSS

import { Component } from '@angular/core';
import {
  AvToggleButtonGroupImports,
  AvToolbarComponent,
} from '@avesra/angular';
import { AppIconComponent } from '../../components/app-icon/app-icon.component';

@Component({
  selector: 'app-toolbar-custom-styles-demo',
  imports: [
    AvToolbarComponent,
    AvToggleButtonGroupImports,
    AppIconComponent,
  ],
  template: `
<av-toolbar
  class="gap-1 rounded-xl border border-border/80 bg-surface-secondary p-1.5"
  aria-label="Formatting toolbar"
>
  <av-toggle-button-group class="gap-0.5" selection-mode="multiple" aria-label="Text style">
    <button
      av-toggle-button
      icon-only
      class="rounded-lg data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
      value="bold"
      aria-label="Bold"
    >
      <app-icon icon="solar:text-bold-linear" size="16" />
    </button>
    <button
      av-toggle-button
      icon-only
      class="rounded-lg data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
      value="italic"
      aria-label="Italic"
    >
      <app-icon icon="solar:text-italic-linear" size="16" />
    </button>
    <button
      av-toggle-button
      icon-only
      class="rounded-lg data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground"
      value="underline"
      aria-label="Underline"
    >
      <app-icon icon="solar:text-underline-linear" size="16" />
    </button>
  </av-toggle-button-group>
</av-toolbar>
`,
})
export class ToolbarCustomStylesDemo {}

Global CSS

To customize Toolbar classes, use the @layer components directive.

@layer components {
  .av-toolbar {
    @apply gap-4 rounded-lg bg-surface p-3;
  }
}

Styling Reference

Avesra follows the BEM methodology so variants and states stay reusable and easy to customize.

CSS Classes

.av-toolbar — Base container
.av-toolbar--horizontal — Horizontal orientation (default)
.av-toolbar--vertical — Vertical orientation
.av-toolbar--attached — Attached variant with surface background and full rounding

API Reference

Props for av-toolbar. Child controls use their own component APIs. Always set aria-label (or aria-labelledby on the host) when there is no visible label.

Prop	Type	Default	Description
`attached`	`boolean`	`false`	Whether the toolbar has a surface background with full rounding.
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	The orientation of the toolbar.
`aria-label`	`string`	—	An accessible label for the toolbar.