useTag

Usage#

import { useTag } from '@primereact/headless/tag';
 
const { rootProps } = useTag();
 
return <span {...rootProps} className="tag"></span>;

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

Features#

• Returns spread-ready rootProps with data-scope and data-part attributes
• Zero-state hook — no internal state or side effects
• Full control over color, shape, icons, and interaction via your own CSS and markup

Behavior#

Icons#

Place icon components alongside text inside the tag element.

const { rootProps } = useTag();
 
<span {...rootProps} className="tag">
    <CheckIcon />
    Active
</span>;

Pill Shape#

Apply border-radius styles to create pill-shaped tags.

<span {...rootProps} style={{ borderRadius: '9999px' }}>
    Pill
</span>

Interactive Tags#

Render the tag as a <button> for clickable behavior.

<button {...rootProps} onClick={handleClick}>
    Clickable
</button>

Custom Styling with Data Attributes#

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

[data-scope='tag'][data-part='root'] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
}

API#

useTag#

Accessibility#

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