When To Use
- Use Badge when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
- Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
- Do not rely on color alone to communicate trend, status, or state in charts and metric cards.
Key Props / API
Props
color
Variant props
variant, size
Key exports
Badge, badgeVariants, badgeColors
Example Code
import { Badge } from "@hilum/ui"
<Badge color="violet">Fiction</Badge>
<Badge color="amber">Science</Badge>
<Badge color="green">Philosophy</Badge>
<Badge color="blue">History</Badge>
<Badge color="rose">Poetry</Badge>Badge
Solid
Tinted color labels
FictionSciencePhilosophyHistoryPoetry
Dot
Outline labels with color indicators
FictionSciencePhilosophyHistoryPoetry
Sizes
sm · md · lg
SmallMediumLarge
Colors
Available Fluid color palette
GrayRedOrangeAmberYellowLimeGreenEmeraldTealCyanBlueIndigoVioletPurpleFuchsiaPinkRose
GrayRedOrangeAmberYellowLimeGreenEmeraldTealCyanBlueIndigoVioletPurpleFuchsiaPinkRose