Badges help highlight important information, such as notifications or new and unread messages.

installyarn add @clayui/badge
versionNPM Version
useimport Badge from '@clayui/badge';

Display Types

Badges are not used for non-numeric values. If you have a non-numeric value, use labels instead. Badges work for exact numbers up to 999. For numbers greater than 999, use K to indicate Thousands (5K for 5.231) and M to indicate Millions (2M for 2.100.523).

We recommend that you review the use cases in the Storybook.

Translucent

The boolean attribute translucent renders a badge with an opaque background color optimized for light backgrounds.

Dark

The boolean attribute dark renders a badge with an opaque background color optimized for dark backgrounds. It adds the class clay-dark to the badge. The class clay-dark can be added to the parent element to make badges contained inside render the dark variant. When adding clay-dark to the parent element, the dark attribute on the badge should be omitted.

Beta (Deprecated)

The property displayType=“beta” has been deprecated in favor of semantic attributes displayType=“info” and translucent.

A component to indicate beta features in DXP. The badge-beta variant doesn’t have any interaction. It just informs the user. It uses a Badge component with custom visual states.

Beta Dark (Deprecated)

The property displayType=“beta-dark” has been deprecated in favor of semantic attributes dark, displayType=“info” and translucent.

badge-beta-dark is a dark variant of badge-beta to be used with dark backgrounds.

API Reference

Badge

React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLSpanElement>>
Parameters
Properties

dark

boolean | undefined

Flag to indicate if the badge should use the clay-dark variant.

displayType

DisplayType | undefined

Determines the color of the badge. The values beta and beta-dark are deprecated since v3.100.0 - use translucent and dark instead.

label

string | number | undefined

Info that is shown inside of the badge itself.

translucent

boolean | undefined

Flag to indicate if the badge should use the translucent variant.

Returns
ReactElement<any, string | JSXElementConstructor<any>> | null
Edit this page on GitHub

Contributors

Matuzalém Teles, Bryce Osterhaus, Diego Nascimento, Patrick Yeo, Krešimir Čoko

Last edited May 9, 2025 at 6:15:38 AM