@xsolla/xui-tag

A pill-shaped label component for categorisation, metadata, or filters with optional icon and remove button.

Installation

yarn add @xsolla/xui-tag

Usage

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

<Tag tone="brand" onRemove={() => console.log("removed")}>
  Version 1.0
</Tag>

Props

Tag

| Prop | Type | Default | Description | |------|------|---------|-------------| | tone | "primary" \| "secondary" \| "brand" \| "brandExtra" \| "success" \| "warning" \| "alert" \| "neutral" | "primary" | Colour tone | | size | "xl" \| "lg" \| "md" \| "sm" \| "xs" | "md" | Tag size | | icon | ReactNode | — | Icon rendered before the label text | | onRemove | () => void | — | When provided, renders an × button that calls this handler |