Components

Badge

Storybook

The Badge component is used to display small numeric values or status indicators. It’s ideal for showing counts or notifications, typically in a rounded visual container.

Imports

1import { Badge } from 'dd360-ds'

Usage

To use the Badge component, provide a value (number) and optionally a variant to indicate the type of status.

The code snippet below shows how to use the Badge component:

1import { Badge } from 'dd360-ds'
2
3<Badge value={3} />
4

Variants

The variant prop allows you to customize the appearance of the Badge. Available options are: default, success, warning, and error. The default value is "default".

1import { Badge } from 'dd360-ds'
2
3<Badge value={1} variant="default" />
4<Badge value={2} variant="success" />
5<Badge value={3} variant="warning" />
6<Badge value={4} variant="error" />
7

API Reference

Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.