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

Default

Badge

<Badge>Badge</Badge>

Themes

PrimarySecondaryTertiaryQuaternaryClear


<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


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

With Icons

ApprovedPendingInfoTagged


<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


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

Sizes

XSSmallMediumLargeXL


<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


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

Custom JSX Content

3 new


<Badge theme="quaternary" ariaLabel="3 new notifications">
  <strong>3</strong>&nbsp;new
</Badge>

Props

Data table
	Type	Description
children	ReactNode	Optional custom badge content.
className	string	Additional custom class names.
data-testid	string	Optional test ID for testing frameworks.
disabled	boolean	If true, disables user interaction and styles as disabled.
icon	IconType	Optional icon to render inside the badge.
onClick	((e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement>) => void)	Click handler for the badge.
outline	boolean	Whether to use the outline style.
rounding	RoundingType	Rounding of the badge ('none' \| 'small' \| 'medium' \| 'large' \| 'full').
shadow	ShadowType	Shadow of the badge ('none' \| 'light' \| 'medium' \| 'strong' \| 'intense').
size	SizeType	Badge size ('xs' \| 'small' \| 'medium' \| 'large' \| 'xl').
state	StateType	The badge state ('success' \| 'error' \| 'warning' \| 'disabled' \| '').
theme	ThemeType	Theme color for the badge ('primary' \| 'secondary' \| 'tertiary' \| 'quaternary' \| 'clear').
title	string	Optional tooltip shown on hover.