Toolbar is a grouping or container component for buttons and other web resources. The Toolbar content is wrapped in two div elements, one for aligning content on the left-hand side using .ui-toolbar-group-left class and another one for aligning content on the right-hand side using the .ui-toolbar-group-right class. An example of the Toolbar component with different buttons, input controls, and text content would be as follows:

<p-toolbar name="toolbar">
  <div class="ui-toolbar-group-left">
    <button pButton type="button" name="open" label="Open" 
      icon="fa-folder-open"></button>
    <button pButton type="button" name="new" label="New folder" 
      icon="fa-plus"></button>
    <p-splitButton  name="organize" label="Organize" 
      icon="fa-check" name="organize"
      [model]="items"></p-splitButton>
  </div>

  <div class="ui-toolbar-group-right">
    <input name="search" type="text" size="30" pInputText 
    [(ngModel)]="search"
      placeholder="Search files here"/>
      <i class="fa fa-bars"></i>
      <button name="refresh" pButton type="button" 
      icon="fa-refresh"></button>
      <button name="help" pButton type="button" 
      icon="fa-question-circle"></button>
  </div>
</p-toolbar>

The following screenshot shows a snapshot result of the Toolbar as an example:

In the preceding snapshot, the commonly used Toolbar buttons are placed on left-hand side and secondary (or additional information) placed on the right-hand side. The skinning features are provided through the style and styleClass attributes.