useButton

Hook that provides data attributes and prop spreading for button elements.

basic-demo

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#

Spread-ready root props, a single rootProps object with data-scope and data-part attributes ready to spread on any element
Stateless, no internal state; native <button> semantics drive all behavior
Element agnostic, works on <button>, <a>, or any custom component that accepts spread props

Styling with data attributes#

The prop object includes data-scope="button" and data-part="root", which work as selectors for all button 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#

Space and Enter activate the button while focused, matching native button semantics. See Primitive for full WAI-ARIA compliance details.