Status Tag

Status tags display contextual status information using semantic colors and icons. They provide at-a-glance visual feedback for states like success, error, warning, and more.

Status Tag Playground

Preview

Code

Status Label

Controls

Status:

Default

Success

Error

Warning

Highlight

Size:

Small

Default

Icon:

Installation

You can add the status tag component to your project manually:

Install the following dependencies:

npm

pnpm

yarn

bun

npm install class-variance-authority clsx tailwind-merge @phosphor-icons/react

Copy and paste the following code into your project.

StatusTag.tsx

cn.ts

Loading source code...

Update the import paths to match your project setup.

Update the import aliases (e.g. @/components, @/utils) in the copied files to match your project's path configuration.

Basic Usage

import { StatusTag } from '@versaui/ui/components/Tag';

<StatusTag label="Pending" />

Status Variants

Each status maps to a distinct color and icon:

<StatusTag label="Pending" />
<StatusTag status="success" label="Completed" />
<StatusTag status="error" label="Failed" />
<StatusTag status="warning" label="Review Required" />
<StatusTag status="highlight" label="New" />

Size Variants

<StatusTag label="Default Size" />
<StatusTag size="small" label="Small Size" />

Without Icon

Hide the leading status icon:

<StatusTag status="success" icon={false} label="Done" />

Accessibility

Semantic colors convey meaning alongside text labels
Icon is decorative and hidden from screen readers via aria-hidden
Text label is always present for screen reader access
Color is not the sole indicator — icons and text provide redundant cues

StatusTag Props

Prop	Type	Default	Description
`status`	`'default' \| 'highlight' \| 'success' \| 'error' \| 'warning'`	`'default'`	Semantic status controlling color and icon.
`size`	`'default' \| 'small'`	`'default'`	Tag size.
`icon`	`boolean`	`true`	Show leading status icon.
`label`	`string`	`'Status'`	Tag label text.
`className`	`string`	`''`	Additional CSS classes.

Install the following dependencies:

Copy and paste the following code into your project.

Update the import paths to match your project setup.

On this page