Toolbar
NewBring useful actions together in a flexible, focused workspace.
Basic
Group actions, search and status in three sections. Create a project or filter the list below.
Your workspace is up to date.
Custom
Combine a project identity with compact actions, and customize the shape with CSS tokens.
Projected content
Place controls directly inside the toolbar when named sections are unnecessary.
Usage and API
Import AvToolbar and the AvToolbarStart, AvToolbarCenter and AvToolbarEnd template directives from avero-ui.
HTML
<av-toolbar aria-label="Project actions">
<ng-template avToolbarStart>
<button avButton (click)="create()">New project</button>
</ng-template>
<ng-template avToolbarCenter>
<input avInput aria-label="Search projects" />
</ng-template>
<ng-template avToolbarEnd>
<button avButton variant="secondary" (click)="save()">Save</button>
</ng-template>
</av-toolbar>Templates. Use direct child templates with avToolbarStart, avToolbarCenter and avToolbarEnd, or the shorthand references #start, #center and #end. If both are supplied for a section, the directive takes precedence. Plain content is also supported.
Accessibility. The root has role="toolbar". Set aria-label or aria-labelledby to identify it. Controls retain their normal Tab order and keyboard behavior. Give icon-only buttons accessible names and toggle buttons aria-pressed.
Styling. Sections wrap on smaller screens. Customize --av-toolbar-background, --av-toolbar-color, --av-toolbar-border, --av-toolbar-radius, --av-toolbar-padding and --av-toolbar-gap on the host.