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> new
</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content displayed inside the badge. Can be plain text, numbers, or custom JSX. |
| ariaLabel | string | - | Accessible label for badges that use non-text children or icon-only content. |
| theme | "primary" | "secondary" | "tertiary" | "quaternary" | "clear" | Configured Default | Controls the visual theme of the badge. |
| state | "" | "success" | "error" | "warning" | - | Applies a semantic state style such as success, warning, or error. |
| title | string | - | Optional tooltip text shown on hover. Falls back to readable text content when available. |
| size | "xs" | "small" | "medium" | "large" | "xl" | Configured Default | Controls the badge size. |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Adjusts the border radius of the badge. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Applies shadow intensity to the badge. |
| outline | boolean | false | Displays the badge in an outlined style instead of filled. |
| icon | IconType | - | Optional icon rendered before the badge content. |
| disabled | boolean | false | Disables interaction and applies disabled styling. |
| onClick | (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void | - | Makes the badge interactive as a button when provided, unless href is also set. |
| href | string | - | Renders the badge as a link when provided. External links open in a new tab. |
| className | string | - | Additional custom class names for styling overrides. |
| data-testid | string | "badge" | Test ID used for testing utilities. |