---
title: "CountBadge"
description: "A number in a small pill: the total beside a title, the filters in use, the records waiting in a queue. Use a Badge for a status in words."
---

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

# CountBadge

## Beside a title

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

<h2 className="font-heading flex items-center gap-2 text-xl">
  Services <CountBadge count={14} />
</h2>
```

## Tones

The filters in use take the brand tone; records waiting for someone, the warning tone.

```tsx
import { FunnelSimpleIcon } from '@phosphor-icons/react';
import { Button, CountBadge } from '@arbol-ai/ui';

<div className="flex flex-wrap items-center gap-3">
  <Button variant="outline">
    <FunnelSimpleIcon aria-hidden /> Filters <CountBadge count={2} tone="brand" />
  </Button>
  <span className="flex items-center gap-2 text-sm">
    <CountBadge count={5} tone="warning" /> Confirm tomorrow’s appointments
  </span>
</div>
```

## At an API’s cap

A total the API stopped counting at reads as at least that many; the label says what it counts.

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

<h2 className="font-heading flex items-center gap-2 text-xl">
  Conversations <CountBadge cap={10_000} count={10_000} label="At least 10,000 conversations" />
</h2>
```

## Source

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

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