---
title: "Badge"
description: "A status pill: the state of a record in a word, in the color of what that state means. It is text, not a control. The apps' old variant names map to tones (see the component's documentation)."
---

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

# Badge

## Tones

```tsx
import { Badge } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-2">
  <Badge>Draft</Badge>
  <Badge tone="brand">Handled by the agent</Badge>
  <Badge tone="success">Confirmed</Badge>
  <Badge tone="warning">Waiting for reply</Badge>
  <Badge tone="danger">Delivery failed</Badge>
  <Badge tone="info">Checked in</Badge>
</div>
```

## Outline

No fill, for a quieter status beside soft ones.

```tsx
import { Badge } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-2">
  <Badge variant="outline">Cancelled</Badge>
  <Badge tone="warning" variant="outline">
    Expires in 3 days
  </Badge>
  <Badge tone="danger" variant="outline">
    Blocked
  </Badge>
</div>
```

## With an icon

```tsx
import { CheckCircleIcon, ClockIcon, SparkleIcon, WarningIcon } from '@phosphor-icons/react';
import { Badge } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-2">
  <Badge tone="brand">
    <SparkleIcon aria-hidden /> AI
  </Badge>
  <Badge tone="success">
    <CheckCircleIcon aria-hidden /> Paid
  </Badge>
  <Badge tone="warning">
    <ClockIcon aria-hidden /> Pending
  </Badge>
  <Badge tone="danger">
    <WarningIcon aria-hidden /> Refused
  </Badge>
</div>
```

## Source

The examples above are [`src/components/badge/badge.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/badge/badge.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/badge/index.mdx