Badge
Status at a glance — confirmation counts, sync state, swap phases. When the underlying status changes, the icon and label roll vertically through the pill instead of blinking, so a transaction visibly travels from broadcasting to confirmed.
Statuses — both sizes
Six statuses × two sizes, every combination. Labels are real wallet vocabulary; counts are tabular so they never jitter as digits tick.
Spinner + pulse are on by default for loading.
import { AnimatedBadge } from "@coldharbor/ui";
<AnimatedBadge status="warning" size="sm">2/6 confirmations</AnimatedBadge>
<AnimatedBadge status="success">Confirmed</AnimatedBadge>--ch-surface--ch-border--ch-fg-muted--ch-primary--ch-success--ch-warning--ch-danger
Modifiers
showIcon=false for tight table cells, pulse for live attention on any status, icon-only for counts, and bare numbers with contentKey driving the roll.
No children — give context via surrounding label.
<AnimatedBadge status="info" showIcon={false} contentKey={pendingCount}>
{pendingCount} pending
</AnimatedBadge>--ch-surface--ch-border--ch-fg-muted--ch-primary--ch-success--ch-warning--ch-danger
Rolling content (live)
One badge, four phases on a timer: broadcasting → 1/6 → 3/6 → confirmed. Status color, icon and label all roll; under reduced motion the swap is a plain crossfade.
<AnimatedBadge status={txStatus} contentKey={label}>{label}</AnimatedBadge>--ch-surface--ch-border--ch-fg-muted--ch-primary--ch-success--ch-warning--ch-danger
Themes
Success and warning badges under all three layers.
--ch-surface--ch-border--ch-fg-muted--ch-primary--ch-success--ch-warning--ch-danger