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 outline theme="primary">Primary</Badge>
<Badge outline state="success">Success</Badge>
<Badge 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" ariaLabel="3 new notifications">
  <strong>3</strong>&nbsp;new
</Badge>

Props API

Badge props API
				Default	Description
`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.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Applies a translucent frosted-glass treatment using the active theme palette.
`href`	`string`	No	props	`—`	Optional href. When provided, the badge renders as an anchor link.
`icon`	`IconType`	No	props	`—`	Optional icon to render inside the badge.
`onClick`	`((e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void)`	No	events	`—`	Click handler for the badge.
`outline`	`boolean`	No	styling	`configured default outline setting (fallback: false)`	Whether to use the outline style.
`rel`	`string`	No	props	`—`	Optional rel attribute when the badge renders as a link.
`rounding`	`RoundingType`	No	styling	`configured default rounding (fallback: "medium")`	Rounding of the badge ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
`shadow`	`ShadowType`	No	styling	`configured default shadow (fallback: "light")`	Shadow of the badge ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').