useBadge

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

5128

basic-demo

Usage#

import { useBadge } from '@primereact/headless/badge';
 
const { rootProps } = useBadge();
 
return <span {...rootProps}></span>;

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

Features#

Returns spread-ready rootProps for the root badge element
Stateless hook — no internal state management, all visual logic handled via CSS
Compatible with any HTML element or custom component via prop spreading

Behavior#

Inline Badge#

Render the badge inline alongside text or buttons.

const { rootProps } = useBadge();
 
<button>
    Messages
    <span {...rootProps}>8</span>
</button>;

Overlay Badge#

Position the badge over another element using CSS positioning.

const { rootProps } = useBadge();
 
<div style={{ position: 'relative', display: 'inline-flex' }}>
    <BellIcon />
    <span {...rootProps} style={{ position: 'absolute', top: '-0.5rem', right: '-0.5rem' }}>
        3
    </span>
</div>;

Dot Badge#

Render an empty badge to display a status dot indicator.

const { rootProps } = useBadge();
 
<span {...rootProps} />;

Custom Styling with Data Attributes#

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

[data-scope='badge'][data-part='root'] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
}
 
[data-scope='badge'][data-part='root']:empty {
    min-width: 0.5rem;
    height: 0.5rem;
}

API#

useBadge#

Name	Type	Default

Accessibility#

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