Badge
VerifiedReviewBlockedGovernedDraft
Badge is a small chip that labels the status of something inline: a row, a
card, a heading.
Usage
import { Badge } from "@sina-design-system/core";
<Badge intent="success">Verified</Badge>
<Badge intent="danger" dot>Blocked</Badge>Examples
Mandatory glyph · danger / warning render a filled icon by default
BlockedReview
Modifiers · dot / icon / dot sm
DotIconDot sm
Dismissible · trailing X via onClose + closeLabel
dangersuccesswarninginfoneutral
size × intent
danger
success
warning
info
neutral
md
danger
success
warning
info
neutral
sm
danger
success
warning
info
neutral
Props
| Prop | Type | Default | Description |
|---|---|---|---|
intent | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | Color and meaning. |
size | "sm" | "md" | "md" | Chip size. |
icon | PhosphorIcon | — | A leading glyph component (inherits the label color). |
dot | boolean | false | A leading status dot. |
Status rules apply
A danger or warning Badge renders a bold glyph automatically. And a Badge is a
status element, so never render it inside an Alert or Toast. Place it as a sibling.
Accessibility
Meaning is never carried by color alone. A severity Badge always pairs its tint
with a glyph or dot plus a text label. A dismissible Badge's close button takes
an explicit closeLabel.