Layout

Toolbar

A bar that groups actions and controls at the start, in the centre and at the end. The groups wrap onto more lines when the space runs out.

Features4

API

Theming

Basic

Mark the content with txToolbarStart and txToolbarEnd; the groups sit at the two ends of the bar.

Last action: none

31 lines

<tx-toolbar ariaLabel="Document">  <button txButton txToolbarStart icon="plus" (click)="last.set('New')">New</button>  <button    txButton    txToolbarStart    severity="secondary"    icon="upload"    (click)="last.set('Upload')"  >    Upload  </button>  <button    txButton    txToolbarStart    text    icon="print"    aria-label="Print"    (click)="last.set('Print')"  ></button>  <button    txButton    txToolbarEnd    severity="secondary"    outlined    icon="download"    (click)="last.set('Export')"  >    Export  </button></tx-toolbar><p class="note">Last action: {{ last() }}</p>

Center

txToolbarCenter adds a middle group — here a search field between the view buttons and the account actions.

27 lines

<tx-toolbar ariaLabel="Projects">  @for (view of views; track view.value) {    <button      txButton      txToolbarStart      [text]="active() !== view.value"      [severity]="active() === view.value ? 'primary' : 'secondary'"      [icon]="view.icon"      [attr.aria-label]="view.label"      [attr.aria-pressed]="active() === view.value"      (click)="active.set(view.value)"    ></button>  }  <tx-icon-field txToolbarCenter>    <tx-input-icon [icon]="'search'" />    <input txInput placeholder="Search projects" aria-label="Search projects" />  </tx-icon-field>  <button    txButton    txToolbarEnd    severity="secondary"    text    icon="cog"    aria-label="Settings"  ></button>  <button txButton txToolbarEnd icon="plus">Project</button></tx-toolbar>

Vertical

orientation="vertical" stacks the groups and tells assistive technology the direction.

Tool: Pencil

26 lines

<div class="row">  <tx-toolbar class="toolbar" orientation="vertical" ariaLabel="Drawing tools">    @for (tool of tools; track tool.icon) {      <button        txButton        txToolbarStart        [text]="picked() !== tool.label"        [severity]="picked() === tool.label ? 'primary' : 'secondary'"        [icon]="tool.icon"        [attr.aria-label]="tool.label"        [attr.aria-pressed]="picked() === tool.label"        (click)="picked.set(tool.label)"      ></button>    }    <button      txButton      txToolbarEnd      text      severity="danger"      icon="trash"      aria-label="Clear"      (click)="picked.set('Clear')"    ></button>  </tx-toolbar>  <p class="note">Tool: {{ picked() }}</p></div>

Design tokens

dt changes one toolbar — here a borderless bar on the ground colour with tighter spacing.

52 lines

<tx-toolbar  ariaLabel="Formatting"  [dt]="{    root: {      background: 'var(--tx-surface-ground)',      borderColor: 'transparent',      padding: '4px',    },    group: { gap: '2px' },  }">  <button    txButton    txToolbarStart    text    severity="secondary"    icon="bold"    aria-label="Bold"  ></button>  <button    txButton    txToolbarStart    text    severity="secondary"    icon="italic"    aria-label="Italic"  ></button>  <button    txButton    txToolbarStart    text    severity="secondary"    icon="align-left"    aria-label="Align left"  ></button>  <button    txButton    txToolbarStart    text    severity="secondary"    icon="align-center"    aria-label="Align center"  ></button>  <button    txButton    txToolbarEnd    text    severity="secondary"    icon="undo"    aria-label="Undo"  ></button></tx-toolbar>