Toolbar is a grouping component for buttons and other content.
import { Toolbar } from 'primereact/toolbar';
Toolbar provides start, center and end properties to place content at these sections.
<Toolbar start={startContent} end={endContent} />
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-toolbar | Main container element. |
| p-toolbar-group-start | Left content container. |
| p-toolbar-group-center | Center content container. |
| p-toolbar-group-end | Right content container. |
Toolbar uses toolbar role for the root element, aria-orientation is not included as it defaults to horizontal. Any valid attribute is passed to the root element so you may add additional properties like aria-labelledby and aria-labelled to define the element if required.
<Toolbar aria-label="Actions">
Content
</Toolbar>
Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.