Badge

View in Lexicon

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.

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

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 January 29, 2025 at 1:35:02 AM

Table of Contents