> ## 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.

# Badge

> A small inline label for status, category, or metadata information.

```tsx theme={null}
import { Badge } from "@fanvue/ui";
import type { BadgeProps, BadgeVariant } from "@fanvue/ui";
```

## Examples

## Default

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

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

<Badge>Badge</Badge>
```

## Truncated

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

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

<div className="flex flex-col gap-3" style={{ width: 80 }}>
  <Badge variant="success">Very long badge text here</Badge>
  <Badge variant="brand" leftDot={false} leftIcon={<CheckCircleIcon className="size-2.5" />}>
    Truncated with icon
  </Badge>
  <Badge variant="default" rightIcon={<ArrowUpRightIcon className="size-2.5" />}>
    Truncated right icon
  </Badge>
</div>
```

## All Variants

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

```tsx theme={null}
import { AIIcon, Badge } from "@fanvue/ui";
import type { BadgeVariant } from "@fanvue/ui";

const VARIANT_GROUPS: { title: string; onDark?: boolean; variants: BadgeVariant[] }[] = [
  {
    title: "Status",
    variants: ["default", "dark", "success", "warning", "error", "info", "special"],
  },
  {
    title: "Colour",
    variants: ["successColour", "warningColour", "errorColour", "infoColour"],
  },
  {
    title: "Brand",
    variants: ["brand", "pink", "brandLight", "pinkLight", "online"],
  },
  {
    title: "On dark surfaces",
    onDark: true,
    variants: ["negative", "alwaysWhite", "aiGenerated"],
  },
];

const VariantBadge = ({ variant, showPip = true }: { variant: BadgeVariant; showPip?: boolean }) =>
  variant === "aiGenerated" ? (
    <Badge variant="aiGenerated" leftDot={false} leftIcon={<AIIcon className="size-2.5" />}>
      AI Generated
    </Badge>
  ) : (
    <Badge variant={variant} leftDot={showPip}>
      {variant}
    </Badge>
  );

const NO_PIP_VARIANTS: BadgeVariant[] = [
  "default",
  "successColour",
  "warningColour",
  "errorColour",
  "infoColour",
];

<div className="flex flex-col gap-8">
  {VARIANT_GROUPS.map((group) => (
    <div key={group.title} className="flex flex-col gap-3">
      <h3 className="typography-body-small-14px-semibold text-content-primary">
        {group.title}
      </h3>
      <div
        className={
          group.onDark
            ? "flex flex-wrap items-center gap-4 rounded-xs bg-surface-primary-inverted p-4"
            : "flex flex-wrap items-center gap-4"
        }
      >
        {group.variants.map((variant) => (
          <VariantBadge key={variant} variant={variant} />
        ))}
      </div>
    </div>
  ))}
  <div className="flex flex-col gap-3">
    <h3 className="typography-body-small-14px-semibold text-content-primary">Without pip</h3>
    <div className="flex flex-wrap items-center gap-4">
      {NO_PIP_VARIANTS.map((variant) => (
        <VariantBadge key={variant} variant={variant} showPip={false} />
      ))}
    </div>
  </div>
</div>
```

## Without Dot

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

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

<Badge leftDot={false}>No Dot</Badge>
```

## Left Icon

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

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

<Badge leftIcon={<CheckCircleIcon className="size-2.5" />} leftDot={false}>Verified</Badge>
```

## Props

## Badge

A small inline label for status, category, or metadata information.

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

<ParamField path="leftDot" type="boolean" default="true">
  Whether to show a coloured status dot at the leading edge.
</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;dark&#x22; | &#x22;info&#x22; | &#x22;success&#x22; | &#x22;warning&#x22; | &#x22;error&#x22; | &#x22;negative&#x22; | &#x22;default&#x22; | &#x22;special&#x22; | ..." default="default">
  Visual style variant of the badge.

  Full type: `"dark" | "info" | "success" | "warning" | "error" | "negative" | "default" | "special" | "successColour" | "warningColour" | "errorColour" | "infoColour" | "aiGenerated" | "alwaysWhite" | "online" | "brand" | "pink" | "brandLight" | "pinkLight"`.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `BadgeProps`, `BadgeVariant`.

***

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