Badge

The Badge component displays compact status labels, tags, counts, and metadata. It supports semantic states, themes, icons, outline styling, and can render as a static badge or interactive button.

Usage & Examples

Default

Badge

default.tsx

<Badge>Badge</Badge>

Themes

PrimarySecondaryTertiaryQuaternaryClear

themes.tsx


  <Badge theme="primary">Primary</Badge>
  <Badge theme="secondary">Secondary</Badge>
  <Badge theme="tertiary">Tertiary</Badge>
  <Badge theme="quaternary">Quaternary</Badge>
  <Badge theme="clear">Clear</Badge>

States

SuccessWarningError

states.tsx


  <Badge state="success">Success</Badge>
  <Badge state="warning">Warning</Badge>
  <Badge state="error">Error</Badge>

With Icons

ApprovedPendingInfoTagged

with-icons.tsx


  <Badge icon={FaCheck} state="success">Approved</Badge>
  <Badge icon={FaExclamation} state="warning">Pending</Badge>
  <Badge icon={FaInfoCircle} theme="primary">Info</Badge>
  <Badge icon={FaTag} theme="secondary">Tagged</Badge>

Outline

PrimarySuccessWarning

outline.tsx


  <Badge variant="outline" theme="primary">Primary</Badge>
  <Badge variant="outline" state="success">Success</Badge>
  <Badge variant="outline" state="warning">Warning</Badge>

Sizes

XSSmallMediumLargeXL

sizes.tsx


  <Badge size="xs">XS</Badge>
  <Badge size="small">Small</Badge>
  <Badge size="medium">Medium</Badge>
  <Badge size="large">Large</Badge>
  <Badge size="xl">XL</Badge>

Interactive Button Badge

interactive-button-badge.tsx


  <Badge
    theme="primary"
    icon={FaCheck}
    onClick={() => alert("Badge clicked")}
  >
    Clickable
  </Badge>

Custom JSX Content

3 new

custom-jsx-content.tsx


  <Badge theme="quaternary" aria-label="3 new notifications">
    <strong>3</strong>&nbsp;new
  </Badge>

Props API

Badge props API
				Default	Description
`aria-atomic`	`boolean`	No	aria	`—`	Indicates whether the badge content is atomic when announced by screen readers.
`aria-describedby`	`string`	No	aria	`—`	References another element that describes this badge.
`aria-label`	`string`	No	aria	`—`	Accessible label for the badge. Useful when the badge content is icon-only or not descriptive enough.
`aria-labelledby`	`string`	No	aria	`—`	References another element that labels this badge.
`aria-live`	`"off" \| "polite" \| "assertive"`	No	aria	`—`	Announces dynamic badge updates to assistive technologies.
`children`	`ReactNode`	No	props	`—`	Optional custom badge content.
`className`	`string`	No	styling	`—`	Additional custom class names.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	If true, disables user interaction and styles as disabled.
`href`	`string`	No	props	`—`	Optional href. When provided, the badge renders as an anchor link.
`icon`	`IconComponent`	No	props	`—`	Optional icon to render inside the badge.
`onClick`	`((e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void)`	No	events	`—`	Click handler for the badge.