CountBadge

Language

Appearance

Beside a title

Services 14

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.

5 Confirm tomorrow’s appointments

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.

Conversations At least 10,000 conversations

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, which the library’s tests render too.