Components

Badge
Storybook

The Badge component in React provides a convenient way to display a small piece of information, such as a status, in a visually appealing and attention-grabbing manner.

Imports

1import { Badge } from 'dd360-ds'

Usage

To use the Badge component, you could start by adding the properties text, classNameIcon and className.

Use the Badge component as shown below:

Hello world

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

1import { Badge } from 'dd360-ds'
2
3 <Badge text="Hello world"/>
4

Variant

With the prop variant you can customize the appearance of the Badge component. Available options are: warning, infoPrimary, infoSecondary, success, primary, secondary, and error. Default uses: "infoPrimary".

Hello world

The code snippet below shows how to set a Badge component variant:

1import { Badge } from 'dd360-ds'
2
3<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
4<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
5<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
6<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
7<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
8<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
9<Badge text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="error"/>
10

Icon

With the prop icon you can customize the icon of the Badge component. Available options are: tag, clock, warning, check, success, exclamation, clipboard-copy, HomeIcon, RefreshIcon, and none. Default uses: "HomeIcon".

tag

clock

warning

check

success

exclamation

clipboard-copy

HomeIcon

RefreshIcon

none

The code snippet below shows how to set a Badge component icon:

1import { Badge } from 'dd360-ds'
2
3<Badge text="tag" classNameIcon='w-4' className='p-1 text-gray-500' icon="tag"/>
4<Badge text="clock" classNameIcon='w-4' className='p-1 text-gray-500' icon="clock"/>
5<Badge text="warning" classNameIcon='w-4' className='p-1 text-gray-500' icon="warning"/>
6<Badge text="check" classNameIcon='w-4' className='p-1 text-gray-500' icon="check"/>
7<Badge text="success" classNameIcon='w-4' className='p-1 text-gray-500' icon="success"/>
8<Badge text="exclamation" classNameIcon='w-4' className='p-1 text-gray-500' icon="exclamation"/>
9<Badge text="clipboard-copy" classNameIcon='w-4' className='p-1 text-gray-500' icon="clipboard-copy"/>
10<Badge text="HomeIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="HomeIcon"/>
11<Badge text="RefreshIcon" classNameIcon='w-4' className='p-1 text-gray-500' icon="RefreshIcon"/>
12<Badge text="none" classNameIcon='w-4' className='p-1 text-gray-500' icon="none"/>
13

API Reference

Name	Types	Default
"variant"	warning infoPrimary infoSecondary success primary secondary error	infoPrimary
"icon"	tag clock warning check success exclamation clipboard-copy HomeIcon RefreshIcon none	HomeIcon
"text"	string	Home Badge
"classNameIcon"	string	-
"classNameText"	string	-
"className"	string	-

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

BarList