useButton

Usage#

import { useButton } from '@primereact/headless/button';
 
const { rootProps } = useButton();
 
return <button {...rootProps}></button>;

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

Features#

• Returns spread-ready rootProps for the root button element
• Stateless hook — no internal state management, all behavior delegated to native <button>
• Compatible with any HTML element or custom component via prop spreading

Behavior#

Custom Styling with Data Attributes#

The prop object includes data-scope="button" and data-part="root" for styling.

[data-scope='button'][data-part='root'] {
    font-weight: 600;
    padding: 0.5rem 1rem;
}
 
[data-scope='button'][data-part='root']:hover {
    opacity: 0.9;
}
 
[data-scope='button'][data-part='root']:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

API#

useButton#

Accessibility#

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