Badge
StableSmall inline label for status, category, or count. Six semantic variants, dot mode for indicators, and automatic count truncation at configurable max.
DisplayVhyxSeal
- Type
- display
- Intent
- display-status
- Safety
- low
- Confirm
- not needed
- Undo
- one-way
Interactive example
ActivePendingErrorUpdate42
Import
tsx
import { Badge } from '@vhyxui/react'Variants
DefaultSuccessWarningDangerInfoOutline
Sizes
SmallMediumLarge
States
74299+999+
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'danger' | 'info' | 'outline' | 'default' | Visual semantic variant. |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge. |
dot | boolean | false | Renders as a small circular dot indicator with no text. |
count | number | — | Numeric count displayed inside the badge. |
max | number | 99 | Maximum count before displaying max+ (e.g. 99+). |
className | string | — | Additional CSS classes. |
Also accepts all standard HTMLSpanElement attributes.
Accessibility
- Text badges are read directly by screen readers — content is the accessible name.
- Dot badges are decorative — add
aria-labelto the parent element for context. - Count badges — supplement with context text or
aria-labelon a parent container. - Badge has no interactive behavior — it is purely informational display.
Agent contract
Default VhyxSeal contract shipped with every Badge.
Default contract
{
"type": "display",
"intent": "display-status",
"description": "Displays a small status label, count, or categorical indicator",
"requires": [],
"requiredPermissions": [],
"consequence": "None — display only.",
"affects": [],
"reversible": false,
"safetyLevel": "low",
"requiresConfirmation": false,
"destructive": false,
"contractVersion": "0.0.1",
"fingerprint": "vhyxs_61526dda"
}Theming
Override these CSS tokens to theme Badge.
--vhyx-color-successSuccess background
--vhyx-color-success-subtleSuccess subtle background
--vhyx-color-dangerDanger background
--vhyx-color-warning-subtleWarning background
--vhyx-color-info-subtleInfo background
--vhyx-radius-fullPill border radius
--vhyx-text-xsFont size
--vhyx-weight-mediumFont weight
Examples
Status list
Homepage redesignPublished
Mobile navigationDraft
Dark mode supportReview
Payment gatewayError
Notification count on nav item
Inbox 12Notifications 3