TreeBadge
Small inline badge for the channel tree — unread counts, mentions, item counts, and state pills.
Import
import { TreeBadge } from "@gumtree/ui/chat/TreeBadge" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant* | "unread" | "mention" | "count" | "state" | - | Badge type |
state | "open" | "merged" | "closed" | "pass" | "run" | "fail" | - | State sub-variant (only when variant is "state") |
children | ComponentChildren | - | Badge label text |
Examples
Unread & Mention
Unread count (red) and mention badge (yellow).
3@14
< TreeBadge variant = "unread" > 3 </ TreeBadge >
< TreeBadge variant = "mention" > @1 </ TreeBadge >
< TreeBadge variant = "count" > 4 </ TreeBadge > State Badges
Outlined pills for PR, CI, and issue states.
openmergedclosed✓ pass◉ run✕ fail
< TreeBadge variant = "state" state = "open" > open </ TreeBadge >
< TreeBadge variant = "state" state = "merged" > merged </ TreeBadge >
< TreeBadge variant = "state" state = "closed" > closed </ TreeBadge >
< TreeBadge variant = "state" state = "pass" > ✓ pass </ TreeBadge >
< TreeBadge variant = "state" state = "run" > ◉ run </ TreeBadge >
< TreeBadge variant = "state" state = "fail" > ✕ fail </ TreeBadge >