> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Pill

> A small rounded label for categorisation, status, or tagging.

```tsx theme={null}
import { Pill } from "@fanvue/ui";
import type { PillProps, PillVariant } from "@fanvue/ui";
```

## Examples

## Truncated

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pill--truncated&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Pill — Truncated" />
</Frame>

```tsx theme={null}
import { ArrowUpRightIcon, FlameIcon, Pill } from "@fanvue/ui";

<div className="flex flex-col gap-3" style={{ width: 100 }}>
  <Pill variant="brand">This is a very long pill label</Pill>
  <Pill variant="base" leftIcon={<FlameIcon className="size-4" />}>
    Truncated with icon
  </Pill>
  <Pill variant="brand" rightIcon={<ArrowUpRightIcon className="size-4" />}>
    Truncated right icon
  </Pill>
</div>
```

## All Variants

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pill--all-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Pill — All Variants" />
</Frame>

```tsx theme={null}
import { Pill } from "@fanvue/ui";

<div className="flex flex-col gap-4">
  <div className="flex flex-wrap items-center gap-3">
    {(
      [
        ["green", "Subscriber"],
        ["grey", "Expired"],
        ["blue", "Follower"],
        ["gold", "VIP Subscriber"],
        ["pinkLight", "Text"],
        ["base", "Example"],
        ["brand", "20% discount"],
        ["brandLight", "20% discount"],
        ["beta", "Beta"],
        ["error", "Error"],
        ["red", "Inactive"],
      ] as const
    ).map(([variant, label]) => (
      <Pill key={variant} variant={variant}>
        {label}
      </Pill>
    ))}
  </div>
  <div className="flex flex-wrap items-center gap-3 rounded-xs bg-surface-primary-inverted p-4">
    <Pill variant="contrast">Contrast</Pill>
    <Pill variant="negative">Negative</Pill>
  </div>
</div>
```

## Left Icon

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pill--left-icon&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Pill — Left Icon" />
</Frame>

```tsx theme={null}
import { FlameIcon, Pill } from "@fanvue/ui";

<Pill variant="base" leftIcon={<FlameIcon className="size-4" />}>Example</Pill>
```

## Right Icon

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-pill--right-icon&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="280" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="Pill — Right Icon" />
</Frame>

```tsx theme={null}
import { ArrowUpRightIcon, Pill } from "@fanvue/ui";

<Pill variant="brand" rightIcon={<ArrowUpRightIcon className="size-4" />}>20% discount</Pill>
```

## Props

## Pill

A small rounded label for categorisation, status, or tagging.

<ParamField path="asChild" type="boolean" default="false">
  Merge props onto a child element instead of rendering a `<span>`.
</ParamField>

<ParamField path="leftIcon" type="ReactNode">
  Icon element displayed before the label.
</ParamField>

<ParamField path="rightIcon" type="ReactNode">
  Icon element displayed after the label.
</ParamField>

<ParamField path="variant" type="&#x22;base&#x22; | &#x22;error&#x22; | &#x22;negative&#x22; | &#x22;brand&#x22; | &#x22;brandLight&#x22; | &#x22;pinkLight&#x22; | &#x22;red&#x22; | ..." default="green">
  Colour variant of the pill.

  Full type: `"base" | "error" | "negative" | "brand" | "brandLight" | "pinkLight" | "red" | "contrast" | "green" | "grey" | "blue" | "gold" | "beta"`.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `PillProps`, `PillVariant`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)