Tag

Tags are interactive elements used for filtering, categorization, or selection. They support various leading items like icons, avatars, country flags, colors, and brand icons.

Tag Playground

Preview

Code

Category Label

Controls

State:

Default

Selected

Disabled

Size:

Default

Small

Leading:

None

Icon

Avatar

Country

Color

Brand

Removable:

Installation

You can add the 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 @react-aria/focus

Copy and paste the following code into your project.

Tag.tsx

Avatar.tsx

CountryFlag.tsx

BrandIcon.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 { Tag } from '@versaui/ui/components/Tag';

// Default tag
<Tag label="Category" />

// Non-removable tag
<Tag removable={false} label="Permanent" />

Leading Items

Tags support different types of leading visual elements:

// Icon
<Tag leadingItem="icon" label="Filter" />

// Avatar
<Tag leadingItem="avatar" avatarPerson="adam-smith" label="User" />

// Country flag
<Tag leadingItem="country" countryCode="us" label="United States" />

// Color indicator
<Tag leadingItem="color" colorValue="#FF5733" label="Color" />

// Brand icon
<Tag leadingItem="brand" brandPlatform="figma" label="Figma" />

States

// Selected
<Tag state="selected" label="Selected" />

// Disabled
<Tag state="disabled" label="Disabled" />

Sizes

// Default size
<Tag label="Default" />

// Small size
<Tag size="small" label="Small" />

Accessibility

Keyboard accessible: Enter/Space to toggle, Delete/Backspace to remove
aria-selected for selection state
Remove button has accessible label
Disabled state announced to screen readers
Focus ring visible on keyboard navigation

Tag Props

Prop	Type	Default	Description
`size`	`'default' \| 'small'`	`'default'`	Tag size.
`state`	`'default' \| 'hovered' \| 'selected' \| 'selected-hovered' \| 'disabled'`	`'default'`	Interactive state.
`leadingItem`	`'none' \| 'icon' \| 'brand' \| 'avatar' \| 'image' \| 'country' \| 'color'`	`'none'`	Type of leading visual element.
`removable`	`boolean`	`true`	Show remove button.
`label`	`string`	`'Tag'`	Tag label text.
`iconComponent`	`React.ReactNode`	`—`	Custom icon when leadingItem is "icon".
`brandPlatform`	`BrandPlatform`	`'figma'`	Brand icon platform when leadingItem is "brand".
`avatarPerson`	`AvatarPerson`	`'adam-smith'`	Avatar person when leadingItem is "avatar".
`avatarType`	`'image' \| 'initials'`	`'image'`	Avatar display type.
`avatarInitials`	`string`	`'PA'`	Avatar initials when avatarType is "initials".
`imageSrc`	`string`	`—`	Image URL when leadingItem is "image".
`countryCode`	`CountryCode`	`'us'`	Country flag code when leadingItem is "country".
`colorValue`	`string`	`'var(--color-brand-primary-strong)'`	Color swatch value when leadingItem is "color".
`onClick`	`() => void`	`—`	Click handler.
`onRemove`	`() => void`	`—`	Remove button handler.

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