Badge
View in LexiconBadges 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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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>
);
}
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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>
);
}
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/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>
);
}
Beta (Deprecated)
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<Badge displayType="info" label="Beta" translucent />
</div>
</Provider>
);
}
Beta Dark (Deprecated)
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';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
return (
<Provider spritemap="/public/icons.svg">
<div className="bg-dark p-4">
<Badge displayType="info" label="Beta" translucent />
</div>
</Provider>
);
}