Angular Toolbar is a grouping component for buttons and other content.
<h3 id="setup">Setup</h3>
Refer to PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.
<h3 id="import">Import</h3>
<pre><code class="lang-js">import {ToolbarModule} from 'primeng/toolbar';
</code></pre>
<h3 id="getting-started">Getting Started</h3>
Toolbar is a container component defined using p-toolbar element. Left aligned content is placed inside a div having .p-toolbar-group-left class and similarly .p-toolbar-group-right for right alignment.
<pre><code class="lang-html">&lt;p-toolbar&gt;
 &lt;div class="p-toolbar-group-left"&gt;
 &lt;p-button label="New" icon="pi pi-plus"&gt;&lt;/p-button&gt;
 &lt;p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"&gt;&lt;/p-button&gt;

 &lt;i class="pi pi-bars"&gt;&lt;/i&gt;

 &lt;p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"&gt;&lt;/p-splitButton&gt;
 &lt;/div&gt;

 &lt;div class="p-toolbar-group-right"&gt;
 &lt;p-button icon="pi pi-search"&gt;&lt;/p-button&gt;
 &lt;p-button icon="pi pi-calendar" styleClass="p-button-success"&gt;&lt;/p-button&gt;
 &lt;p-button icon="pi pi-times" styleClass="p-button-danger"&gt;&lt;/p-button&gt;
 &lt;/div&gt;
&lt;/p-toolbar&gt;
</code></pre>
<h3 id="theming">Theming</h3>
Toolbar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primeng/showcase/#/theming">Designer</a> tool.
<h3 id="resources">Resources</h3>
Visit the PrimeNG <a target="_blank" href="https://primefaces.org/primeng/showcase/#/toolbar">Toolbar</a> showcase for demos and documentation.

Angular Toolbar is a grouping component for buttons and other content.

### Setup

Refer to PrimeNG [setup documentation](https://primefaces.org/primeng/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import {ToolbarModule} from 'primeng/toolbar';
```

### Getting Started

Toolbar is a container component defined using p-toolbar element. Left aligned content is placed inside a div having **.p-toolbar-group-left** class and similarly **.p-toolbar-group-right** for right alignment.

```html
<p-toolbar>
 <div class="p-toolbar-group-left">
 <p-button label="New" icon="pi pi-plus"></p-button>
 <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
 
 
 
 <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
 </div>
 
 <div class="p-toolbar-group-right">
 <p-button icon="pi pi-search"></p-button>
 <p-button icon="pi pi-calendar" styleClass="p-button-success"></p-button>
 <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
 </div>
</p-toolbar>
```

### Theming

Toolbar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primeng/showcase/#/theming) tool.

### Resources

Visit the PrimeNG [Toolbar](https://primefaces.org/primeng/showcase/#/toolbar) showcase for demos and documentation.