Toolbar is a grouping component for buttons and other content.
import { Toolbar } from 'primereact/toolbar';<Toolbar></Toolbar>Toolbar provides Toolbar.Start, Toolbar.Center and Toolbar.End components to place content at these sections.
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Toolbar } from 'primereact/toolbar';
export default function BasicDemo() {
return (
<div className="card">
<Toolbar>
<Toolbar.Start>
<Button className="mr-2" severity="secondary" variant="text">
<i className="pi pi-plus"></i>
</Button>
<Button className="mr-2" severity="secondary" variant="text">
<i className="pi pi-print"></i>
</Button>
<Button severity="secondary" variant="text">
<i className="pi pi-upload"></i>
</Button>
</Toolbar.Start>
<Toolbar.Center>
<InputText placeholder="Search" />
</Toolbar.Center>
<Toolbar.End>
<Button>Save</Button>
</Toolbar.End>
</Toolbar>
</div>
);
}A customized toolbar with navigation bar functionality.
import { Avatar } from 'primereact/avatar';
import { Button } from 'primereact/button';
import { Toolbar } from 'primereact/toolbar';
export default function CustomDemo() {
return (
<div className="card">
<Toolbar style={{ borderRadius: '3rem', padding: '1rem 1rem 1rem 1.5rem' }}>
<Toolbar.Start>
<Button variant="text" plain>
Files
</Button>
<Button variant="text" plain>
Edit
</Button>
<Button variant="text" plain>
View
</Button>
</Toolbar.Start>
<Toolbar.End>
<div className="flex items-center gap-2">
<Button severity="contrast" size="small">
Share
</Button>
<Avatar shape="circle">
<Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
<Avatar.Fallback>A</Avatar.Fallback>
</Avatar>
</div>
</Toolbar.End>
</Toolbar>
</div>
);
}Toolbar uses toolbar role to 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 to define the element if required.`
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.