Components

Chip
Storybook

The Chip 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 { Chip } from 'dd360-ds'

Usage

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

Use the Chip component as shown below:

Hello world

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

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

Variant

With the prop variant you can customize the appearance of the Chip 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 Chip component variant:

1import { Chip } from 'dd360-ds'
2
3<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="warning"/>
4<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoPrimary"/>
5<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="infoSecondary"/>
6<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="success"/>
7<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="primary"/>
8<Chip text="Hello world" classNameIcon='w-4' className='p-1 text-gray-500' variant="secondary"/>
9<Chip 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 Chip 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 Chip component icon:

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

CircleConfirm Dialog