Getting Started
Components
Search for a command to run...
Badges are compact UI elements used to highlight important information, categorize content, or display status. They come in various visual styles (variants) to convey different meanings such as success, error, warning, or informational states. Badges are typically non-interactive but can be combined with interactive elements like buttons or links.
Use badges to draw attention to specific attributes, counts, or statuses without taking up much space in your interface. They're particularly useful in lists, tables, and headers to provide quick visual context. Badges should be concise and contain minimal text to maintain their compact nature and visual impact.
import { Badge } from "@strongtie/design-system/badge"<Badge>| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "secondary" | "destructive" | "outline" | null | - |
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
badgeEnsure proper accessibility attributes are added when implementing this component.