Badge
Data DisplayCompact status / label pill. Variants: solid, outline, dot.
Inline label for status, category, or count. Variants map to semantic tones: default, info, success, warning, critical, accent. Space Mono uppercase for smaller sizes.
Usage
import { Badge } from "nosible-ux"
export default function Example() {
return <Badge variant="success">Signal matched</Badge>
}Examples
All variants
PendingScanningMatchedLow confidenceAlertNew
Sizes and circle
XSSMMDLG5
With icon sections
Bullish signalBearish signal
Accessibility
Semantic meaning is conveyed by color — include text content that communicates the status without relying on color alone.
Props
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | undefined | false | When true, renders the child element as the root (for clickable badges). |
circle | boolean | undefined | false | When true, renders as a square pill sized to its height (for numeric counts). |
leftSection | ReactNode | — | Element rendered before the label text. |
rightSection | ReactNode | — | Element rendered after the label text. |
size | "xs" | "sm" | "md" | "lg" | null | undefined | — | |
variant | "default" | "critical" | "accent" | "info" | "success" | "warning" | null | undefined | — |