Badges help highlight important information, such as notifications or new and unread messages.
install yarn add @clayui/badge version use import 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).
import {Provider } from '@clayui/core' ;
import Badge from '@clayui/badge' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Badge displayType = "success" label = "100" />
<Badge displayType = "primary" label = "100" />
<Badge displayType = "secondary" label = "100" />
<Badge displayType = "info" label = "100" />
<Badge displayType = "warning" label = "100" />
<Badge displayType = "danger" label = "100" />
</div >
</Provider >
);
}Show code
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.
import {Provider } from '@clayui/core' ;
import Badge from '@clayui/badge' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Badge displayType = "primary" label = "Primary" translucent />
<Badge displayType = "info" label = "Info" translucent />
<Badge displayType = "success" label = "Success" translucent />
<Badge displayType = "warning" label = "Warning" translucent />
<Badge displayType = "danger" label = "Danger" translucent />
</div >
</Provider >
);
}Show code
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.
import {Provider } from '@clayui/core' ;
import Badge from '@clayui/badge' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "clay-dark bg-dark p-4" >
<Badge displayType = "primary" label = "Primary" translucent />
<Badge displayType = "info" label = "Info" translucent />
<Badge displayType = "success" label = "Success" translucent />
<Badge displayType = "warning" label = "Warning" translucent />
<Badge displayType = "danger" label = "Danger" translucent />
</div >
</Provider >
);
}Show code
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.
import {Provider } from '@clayui/core' ;
import Badge from '@clayui/badge' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "p-4" >
<Badge displayType = "info" label = "Beta" translucent />
</div >
</Provider >
);
}
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.
import {Provider } from '@clayui/core' ;
import Badge from '@clayui/badge' ;
import React from 'react' ;
export default function App () {
return (
<Provider spritemap = "/icons.svg" >
<div className = "bg-dark p-4" >
<Badge displayType = "info" label = "Beta" translucent />
</div >
</Provider >
);
}API Reference
Badge React .ForwardRefExoticComponent < IProps & React .RefAttributes < HTMLSpanElement >>
Parameters Properties 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>> | nullEdit 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