Skip to main content

Badge

Stable

Small inline label for status, category, or count. Six semantic variants, dot mode for indicators, and automatic count truncation at configurable max.

DisplayVhyxSeal

Interactive example

ActivePendingErrorUpdate42
Status badges and count indicator

Import

tsx
import { Badge } from '@vhyxui/react'

Variants

DefaultSuccessWarningDangerInfoOutline
All 6 variants

Sizes

SmallMediumLarge
sm, md, lg

States

Dot mode — notification indicators
74299+999+
Count with truncation

Props

PropTypeDefaultDescription
variant'default' | 'success' | 'warning' | 'danger' | 'info' | 'outline''default'Visual semantic variant.
size'sm' | 'md' | 'lg''md'Size of the badge.
dotbooleanfalseRenders as a small circular dot indicator with no text.
countnumber—Numeric count displayed inside the badge.
maxnumber99Maximum count before displaying max+ (e.g. 99+).
classNamestring—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-label to the parent element for context.
  • ✓ Count badges — supplement with context text or aria-label on 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
Content status badges in a list

Notification count on nav item

Inbox 12Notifications 3
Count badge inline with nav link