TagLabel

A specialised cross-platform identification and categorisation tag composed of optional segments — entity, subentity, ID, label, rarity, status, and a custom slot.

This is a core narrative element within the Xsolla brand. They represent the identification and categorisation of items — so that whenever they are seen within brand outputs, the audience recognises that they are engaging with something that is part of a much larger collection.

Installation

npm install @xsolla/xui-tag-label

Imports

import {
  TagLabel,
  type EntityType,
  type SubentityType,
  type StatusType,
} from "@xsolla/xui-tag-label";

Quick start

import * as React from "react";
import { TagLabel } from "@xsolla/xui-tag-label";

export default function QuickStart() {
  return (
    <TagLabel
      entityType="item"
      subentityType="skin"
      series="XLA"
      number="-001-001"
      label="Backpack"
      status="sale"
    />
  );
}

API Reference

<TagLabel>

| Prop | Type | Default | Description | | --------------- | --------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | entityType | "item" \| "product" \| "account" | — | Primary category. Drives icon and tinted background of the entity segment. | | subentityType | SubentityType | — | Detailed sub-category (e.g. "skin", "game", "sdk"). Hidden when compact. | | icon | ReactNode | — | Custom icon override for the entity segment. | | series | string | — | ID series prefix (e.g. "XLA"). | | number | string | — | ID number suffix (e.g. "-001-001"). | | label | string | — | Item label/name. Hidden when compact. | | rarity | ReactNode | — | Rarity icon segment. Hidden when compact. | | status | "sale" \| "maintenance" \| "inactive" | — | Status indicator segment. Hidden when compact. | | compact | boolean | false | Render the icon-only / minimal version. | | children | ReactNode | — | Custom trailing-slot content. Hidden when compact. | | style | CSSProperties | — | Inline style overrides on the root container. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Exported types

| Type | Members | | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | EntityType | "item" \| "product" \| "account" | | StatusType | "sale" \| "maintenance" \| "inactive" | | SubentityType | "skin" \| "in-game-item" \| "currency" \| "bundle" \| "lootbox" \| "game-key" \| "discount" \| "coupon" \| "game" \| "sdk" \| "plugin" \| "api" \| "service" \| "tool" \| "webshop" \| "app" \| "launcher" \| "library" \| "engine" \| "user" \| "developer" \| "influencer" \| "publisher" \| "settings" |

Anatomy

The tag is composed of optional segments rendered in this order:

1. Entity — coloured background, icon, label.
2. Subentity — secondary categorisation (omitted when compact).
3. ID — series + number.
4. Name — descriptive text (omitted when compact).
5. Rarity — icon (omitted when compact).
6. Status — operational status icon (omitted when compact).
7. Custom slot — children (omitted when compact).

Examples

Compact

import * as React from "react";
import { TagLabel } from "@xsolla/xui-tag-label";

export default function CompactTagLabel() {
  return <TagLabel entityType="item" series="XLA" number="-001-001" compact />;
}

With status

import * as React from "react";
import { TagLabel } from "@xsolla/xui-tag-label";

export default function TagLabelStatus() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <TagLabel entityType="product" label="Adventure Pack" status="sale" />
      <TagLabel entityType="product" label="Dev Kit" status="maintenance" />
      <TagLabel entityType="account" label="User #42" status="inactive" />
    </div>
  );
}

Custom trailing slot

import * as React from "react";
import { TagLabel } from "@xsolla/xui-tag-label";

export default function TagLabelCustomSlot() {
  return (
    <TagLabel entityType="item" subentityType="skin" label="Camo Skin">
      Limited
    </TagLabel>
  );
}

Accessibility

• Provide context around the tag (e.g. a list label or surrounding heading) so screen readers can interpret the categorisation.
• The component is decorative; for interactive use, wrap in a button or link with an explicit accessible name.