Toolbar

Angular Material Toolbar is a layout container for placing titles, actions, or controls in a consistent header area across the app. It can be a single bar or stack several rows on top of each other, and the content inside can be pushed apart so a title sits on one side and the actions on the other. BuilderKit restyles the surface, the height and the spacing so the mat-toolbar component matches the rest of the design system.

A toolbar is plain markup inside, so the actions in it are normal button elements, icon buttons included.

Example

Below is an example of how BuilderKit restyles the Angular Material Toolbar and gives it a more modern appearance.

<mat-toolbar class="gap-x-1">
  <button matIconButton>
    <mat-icon svgIcon="menu" />
  </button>
  <span>My App</span>
  <span class="flex-auto"></span>
  <button matIconButton>
    <mat-icon svgIcon="heart-plus" />
  </button>
  <button matIconButton>
    <mat-icon svgIcon="share" />
  </button>
</mat-toolbar>

Multi-row toolbar

Rows stack inside one toolbar and grow it to fit them, which leaves the title on the first line and a second line free for the actions that belong to the current page.

<mat-toolbar>
  <mat-toolbar-row>
    <span>My App</span>
  </mat-toolbar-row>

  <mat-toolbar-row class="gap-x-1">
    <span>Projects</span>
    <span class="flex-auto"></span>
    <button matIconButton>
      <mat-icon svgIcon="search" />
    </button>
    <button matIconButton>
      <mat-icon svgIcon="settings" />
    </button>
  </mat-toolbar-row>
</mat-toolbar>