Tag: React component

Tag is a flexible label component that supports color variants, sizes, and optional icons on either side. Useful for tokens, filters, statuses, and tags.

Badge, Tag or Chip

Badge announces something, usually as a link: the "New" line above a hero. Tag is a static label for a status, category or piece of metadata. Chip is interactive: a choice that can be selected or removed, in filters and in TagInput. 3.0 plans to consolidate them.

Tag

New

Passed

Error

<Tag scheme="brand" label="New" />
<Tag scheme="success" label="Passed" prefixIcon="check" />
<Tag scheme="danger" label="Error" suffixIcon="close" />

Sizes

Tag is available in three sizes for flexibility in dense or prominent layouts.

Sizes

Small

Medium

Large

<Tag size="s" label="Small" />
<Tag size="m" label="Medium" />
<Tag size="l" label="Large" />

Variants

Supports all Once UI design tokens including brand, neutral, danger, success, and info.

Variants

Brand

Accent

Info

Warning

Success

Danger

Neutral

Gradient

<Tag scheme="brand">Brand</Tag>
<Tag scheme="accent">Accent</Tag>
<Tag scheme="info">Info</Tag>
<Tag scheme="warning">Warning</Tag>
<Tag scheme="success">Success</Tag>
<Tag scheme="danger">Danger</Tag>
<Tag scheme="neutral">Neutral</Tag>
<Tag scheme="gradient">Gradient</Tag>

Inside text

A Tag is a div by default, which is not allowed inside a paragraph. With as="span" every element in it is a span and it flows inline, so it can sit in a sentence. It looks the same.

Inside text

Exports are Beta while we finish the API.

<Text as="p" variant="body-default-m">
Exports are <Tag as="span" scheme="brand" label="Beta" /> while we finish the API.
</Text>

API reference

	Type	Default
scheme Colour scheme. This was called variant before 2.0.	ColorSchemegradient	neutral
size Tag size.	lms	m
label The text.	string	""
prefixIcon Icon before the label.	IconName	—
suffixIcon Icon after the label.	IconName	—
children	React.ReactNode	—
…and every FlexProps prop	inherited	—
className	string	—
style	React.CSSProperties	—