Tag

A cross-platform React tag component for displaying labels, categories, and removable chips. Supports multiple tones, solid/outlined types, and optional left/right icons.

Installation

npm install @xsolla/xui-tag
# or
yarn add @xsolla/xui-tag

Demo

Basic Tag

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function BasicTag() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Tag>Default</Tag>
      <Tag tone="brand">Brand</Tag>
      <Tag tone="success">Success</Tag>
    </div>
  );
}

Tag Tones

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function TagTones() {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      <Tag tone="primary">Primary</Tag>
      <Tag tone="brand">Brand</Tag>
      <Tag tone="brandExtra">Brand Extra</Tag>
      <Tag tone="success">Success</Tag>
      <Tag tone="warning">Warning</Tag>
      <Tag tone="alert">Alert</Tag>
      <Tag tone="neutral">Neutral</Tag>
    </div>
  );
}

Tag Sizes

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function TagSizes() {
  return (
    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
      <Tag size="xs">Extra Small</Tag>
      <Tag size="sm">Small</Tag>
      <Tag size="md">Medium</Tag>
      <Tag size="lg">Large</Tag>
      <Tag size="xl">Extra Large</Tag>
    </div>
  );
}

Solid vs Outlined

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function TagTypes() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Tag tone="brand" type="solid">Solid</Tag>
      <Tag tone="brand" type="outlined">Outlined</Tag>
    </div>
  );
}

Tag with Icons

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';
import { Check } from '@xsolla/xui-icons';
import { Star, Clock } from '@xsolla/xui-icons-base';

export default function TagWithIcon() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Tag iconLeft={<Star size={12} />} tone="warning">Featured</Tag>
      <Tag iconLeft={<Check size={12} />} tone="success">Verified</Tag>
      <Tag iconLeft={<Clock size={12} />} iconRight={<Star size={12} />} tone="neutral">Pending</Tag>
    </div>
  );
}

Icon-Only Tag

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';
import { Check } from '@xsolla/xui-icons';

export default function IconOnlyTag() {
  return <Tag iconLeft={<Check size={12} />} tone="success" />;
}

Removable Tag

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function RemovableTag() {
  const [tags, setTags] = React.useState(['React', 'TypeScript', 'Node.js', 'GraphQL']);

  const removeTag = (tagToRemove: string) => {
    setTags(tags.filter(tag => tag !== tagToRemove));
  };

  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      {tags.map(tag => (
        <Tag key={tag} tone="brand" onRemove={() => removeTag(tag)}>
          {tag}
        </Tag>
      ))}
    </div>
  );
}

Anatomy

Import the component and use it directly:

import { Tag } from '@xsolla/xui-tag';

<Tag
  size="md"                    // Size variant
  tone="brand"                 // Color tone
  type="solid"                 // Solid or outlined
  iconLeft={<Icon />}          // Optional leading icon
  iconRight={<Icon />}         // Optional trailing icon
  onRemove={handleRemove}      // Makes tag removable (renders X icon)
>
  Tag Label
</Tag>

Examples

Category Tags

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';

export default function CategoryTags() {
  const categories = [
    { name: 'Technology', tone: 'brand' as const },
    { name: 'Design', tone: 'brandExtra' as const },
    { name: 'Marketing', tone: 'success' as const },
    { name: 'Sales', tone: 'warning' as const },
  ];

  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {categories.map(cat => (
        <Tag key={cat.name} tone={cat.tone} size="sm">
          {cat.name}
        </Tag>
      ))}
    </div>
  );
}

Status Tags

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';
import { CheckCircle, Clock, XCircle } from '@xsolla/xui-icons-base';

export default function StatusTags() {
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      <Tag iconLeft={<CheckCircle size={12} />} tone="success">
        Completed
      </Tag>
      <Tag iconLeft={<Clock size={12} />} tone="warning">
        In Progress
      </Tag>
      <Tag iconLeft={<XCircle size={12} />} tone="alert">
        Failed
      </Tag>
    </div>
  );
}

Tag Input

import * as React from 'react';
import { Tag } from '@xsolla/xui-tag';
import { Input } from '@xsolla/xui-input';

export default function TagInput() {
  const [tags, setTags] = React.useState(['react', 'typescript']);
  const [inputValue, setInputValue] = React.useState('');

  const addTag = () => {
    if (inputValue.trim() && !tags.includes(inputValue.trim())) {
      setTags([...tags, inputValue.trim()]);
      setInputValue('');
    }
  };

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 8 }}>
        {tags.map(tag => (
          <Tag
            key={tag}
            tone="primary"
            onRemove={() => setTags(tags.filter(t => t !== tag))}
          >
            {tag}
          </Tag>
        ))}
      </div>
      <Input
        value={inputValue}
        onChangeText={setInputValue}
        placeholder="Add a tag..."
        onKeyDown={(e) => e.key === 'Enter' && addTag()}
      />
    </div>
  );
}

API Reference

Tag

A tag/chip component.

Tag Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Tag content. Optional for icon-only tags. | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Size of the tag. | | tone | "primary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral" | "primary" | Color tone. | | type | "solid" \| "outlined" | "solid" | Visual type. Solid fills background; outlined uses a border with lighter background. | | iconLeft | ReactNode | - | Leading icon. | | iconRight | ReactNode | - | Trailing icon. | | onRemove | () => void | - | Callback for remove button. Renders an X icon in the trailing position. |

Solid Tone Color Mapping:

| Tone | Background | Text | | :--- | :--------- | :--- | | primary | Background primary | Content primary | | brand | Brand primary | On brand | | brandExtra | BrandExtra primary | On brandExtra | | success | Success primary | On success | | warning | Warning primary | On warning | | alert | Alert primary | On alert | | neutral | Neutral primary | On neutral |

Outlined Tone Color Mapping:

| Tone | Background | Border | Text | | :--- | :--------- | :----- | :--- | | primary | Background primary | Border secondary | Content primary | | brand | Brand secondary | Border brand | Content brand primary | | brandExtra | BrandExtra secondary | Border brandExtra | Content brandExtra primary | | success | Success secondary | Border success | Content success primary | | warning | Warning secondary | Border warning | Content warning primary | | alert | Alert secondary | Border alert | Content alert primary | | neutral | Neutral secondary | Border neutral | Content neutral primary |

Theming

Tag uses the design system theme for colors:

// Solid colors (example for "brand" tone)
theme.colors.background.brand.primary  // Background
theme.colors.content.on.brand         // Text color

// Outlined colors (example for "brand" tone)
theme.colors.background.brand.secondary  // Background
theme.colors.border.brand               // Border color
theme.colors.content.brand.primary      // Text color

Accessibility

• Uses semantic elements for proper structure
• Remove button includes accessible label
• Keyboard accessible remove action
• Focus indicator on interactive elements