Badge

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

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

Table of Contents

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).

Open on CodeSandboxOpen Sandbox
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.

Icon

A badge can display an optional icon alongside its text by passing the symbol attribute with the id of an icon in the spritemap. The icon is rendered after the label, sized relative to the text, and inherits the badge color. The spritemap is resolved from the spritemap attribute or inherited from a parent Provider.

Use the icon to reinforce the meaning of a short value, such as a status or a trend. Avoid icon-only badges without a label, and avoid pairing an icon with long or multi-line text, since badges are meant for short values.

Open on CodeSandboxOpen Sandbox
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" symbol="check" />
				<Badge displayType="info" label="100" symbol="info-circle" />
				<Badge displayType="warning" label="100" symbol="warning-full" />
				<Badge
					displayType="danger"
					label="100"
					symbol="exclamation-full"
				/>
			</div>
		</Provider>
	);
}

Translucent

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

Open on CodeSandboxOpen Sandbox
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.

Open on CodeSandboxOpen Sandbox
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)

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.

Open on CodeSandboxOpen Sandbox
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)

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.

Open on CodeSandboxOpen Sandbox
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>
	);
}

API Reference

Edit this page on GitHub

Table of Contents