Tag

An unstyled, accessible tag component for categorizing content.

Build fully custom categorization labels with complete control over layout and styling.

ActiveInfoWarningDefault

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Tag with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Single component with children-based composition for label and icon content
Polymorphic rendering for interactive tags (as="button")

Usage#

import { Tag } from 'primereact/tag';

<Tag></Tag>

Behavior#

Polymorphic Rendering#

Use as to change the rendered HTML element. Render as "button" for clickable tags.

<Tag as="button" onClick={handleClick}>
    Clickable
</Tag>

Default element: span.

Render Function Children#

Tag accepts a render function as children, providing access to the component instance.

<Tag>{(instance) => <span>{instance.props.children}</span>}</Tag>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

DraftInfoActiveAttentionErrorFeaturedNewArchivedPendingVerified

/* Select a part to see its CSS selector for custom styling */

API#

Tag#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: TagInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: TagInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`TagInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<TagPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: TagInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`severity`	`"secondary"` \| `"info"` \| `"success"` \| `"warn"` \| `"danger"` \| `"contrast"`	—
Severity type of the tag.
`rounded`	`boolean`	`false`
Whether the corners of the tag are rounded.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"tag"`
`data-part`	`"root"`

Defines passthrough(pt) options of Tag component.

label	type	description
root	TagPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Tag does not include any roles and attributes by default, any attribute is passed to the root element so aria roles and attributes can be added if required. If the tags are dynamic, aria-live may be utilized as well. In case badges need to be tabbable, tabindex can be added to implement custom key handlers.

Keyboard Support#

Component does not include any interactive elements.

Tag