useTag

Usage#

import { useTag } from '@primereact/headless/tag';

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

useTag returns spread-ready rootProps with scoped data attributes — color, shape, icons, and interactivity are handled with your own markup and CSS. See Primitive for a component-based API.

Features#

• Spread-ready root props — a single object you can drop onto any element
• Zero-state — no internal state or effects, suitable for purely visual labels
• Styling hooks — data-scope="tag" and data-part="root" selectors for targeted styling
• Markup-agnostic — render as a span, a, button, or any component that forwards standard props

Working with callbacks#

Compose with icons#

Place icon components alongside the label inside the tag element.

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

Pill shape#

Apply border-radius via inline styles or classes to create pill-shaped tags.

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

Interactive tags#

Render the tag as a <button> when it should be clickable — rootProps spreads onto any valid element.

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

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#

Static label — Tab skips it unless a close button is present, which activates on Enter or Space. See Primitive for full WAI-ARIA compliance details.