useToolbar

Usage#

import { useToolbar } from '@primereact/headless/toolbar';
 
const { rootProps } = useToolbar();
 
return (
    <div {...rootProps} role="toolbar">
        ...
    </div>
);

useToolbar returns spread-ready rootProps with data attributes — see Primitive for a component-based API.

Features#

• Spread-ready rootProps for the root container element
• Stateless hook — no internal state or side effects
• Full freedom over content layout (start, center, end regions)

Behavior#

Layout Regions#

Compose start, center, and end sections using native HTML elements. There are no structural constraints — arrange content in any order using flex or grid layout.

const { rootProps } = useToolbar();
 
<div {...rootProps} role="toolbar">
    <div>Left actions</div>
    <div>Center content</div>
    <div>Right actions</div>
</div>;

Custom Styling with Data Attributes#

[data-scope='toolbar'][data-part='root'] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
}

API#

useToolbar#

Accessibility#

See Toolbar Primitive for WAI-ARIA compliance details and keyboard support.