Badge | Arbol UI

Language

Appearance

Tones

DraftHandled by the agentConfirmedWaiting for replyDelivery failedChecked in

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.

CancelledExpires in 3 daysBlocked

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

AI Paid Pending Refused

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