chip.mdx

product	dd360-ds
title	React Chip component
components	Chip

Components

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

Usage

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

Use the Chip component as shown below:

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

<WindowEditor codeString={`import { Chip } from 'dd360-ds'

`}/>

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

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

<WindowEditor codeString={`import { Chip } from 'dd360-ds'

`}/>

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

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

<WindowEditor codeString={`import { Chip } from 'dd360-ds'

`}/>

API Reference

<CustomTableDocs dataTable={[ { title: 'variant', default: 'infoPrimary', types: ['warning', 'infoPrimary', 'infoSecondary', 'success', 'primary', 'secondary', 'error'] }, { title: 'icon', default: 'HomeIcon', types: ['tag', 'clock', 'warning', 'check', 'success', 'exclamation', 'clipboard-copy', 'HomeIcon', 'RefreshIcon', 'none'] }, { title: 'text', default: 'Home Chip', types: ['string'] }, { title: 'classNameIcon', default: null, types: ['string'] }, { title: 'classNameText', default: null, types: ['string'] }, { title: 'className', default: null, types: ['string'] } ]} />

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