Badge
Compact status labels with semantic color and density axes.
Contract
| Axis | Values | Default |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/badge.css';Scroll inside the code area to read long lines.
Imports
import { TRBadge } from '@tinyrack/ui/components/badge';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Icon and constrained long label permalink
Icons are decorative when the adjacent text communicates the same status; long labels wrap inside their parent.
Status variants permalink
Choose the variant from the status meaning, not only its color.
Sizes permalink
Match badge density to nearby text and controls.
API
Options
| Prop | Type | Default | Purpose |
|---|---|---|---|
variant | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'neutral' | Selects the status meaning and color treatment. |
uiSize | 'md' | 'lg' | 'md' | Sets badge density. |
HTML and accessibility
TRBadge renders a span and forwards its native props, events, styles, and React 19 ref. It exports TRBadgeProps, TRBadgeUiSize, and TRBadgeVariant. It does not assign a role or live-region behavior. Keep status text visible; an icon alone needs an application-provided accessible label.