Badge

The Badge component is used to highlight status, categories, or metadata with optional icons.

Usage

Default

Badge

<Badge text="Badge" />

With Icon

CheckWarningInfo


<Badge text="Check" icon={FaCheck} state="success" />
<Badge text="Warning" icon={FaExclamation} state="warning" />
<Badge text="Info" icon={FaInfoCircle} theme="primary" />

Props

Sortable data table
Prop	Type	Default	Description
text	string	-	Text or label displayed inside the badge.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Theme color of the badge (primary, secondary, etc).
state	"" \| "success" \| "error" \| "warning"	-	Semantic state style applied to the badge.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Badge size (xs, small, medium, large, xl).
rounding	"none" \| "small" \| "medium" \| "large"	Configured Default	Controls border-radius for the badge shape.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Applies shadow intensity to the badge.
outline	boolean	false	If true, displays badge with outline instead of solid background.
icon	ReactNode	-	Optional icon displayed at the start of the badge.
onClick	() => void	-	Callback fired when the badge is clicked (if interactive).
className	string	-	Additional CSS class name(s) for custom styling.
data-testid	string	"badge"	Test ID for test automation.