Tag

Updated: May 11, 2025

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

Tag

New

Passed

Error

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

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>

API reference

Prop	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	—

ComponentsTable

ComponentsThemeSwitcher

Edit this page on GitHub

Built with curiosity by Lorant One and the Design Engineers Club