Chip

Chip is a components that is used to display a small piece of information such as a tag, a category, or a status. It is typically used in conjunction with a list of items to provide context to the user.

This components. Store at src/components/atoms/chip

Basic example

This is an example of how to use the chip component.

ExampleCode

Default

Color red

Color green

Color blue

Color

You can set the color of the chip by using the color prop. You can find the allow color at Color guideline

ExampleCode

gray

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

white

black

Chip with icon

You can add the icon to the chip just add icon to the children.

ExampleCode

Red

Orange

Attribute

id: string; The unique identifier for the chip.
children: ReactNode (required); The content to be displayed inside the chip.
color: string; The color of the chip. Default is 'gray'.

Term of service

Privacy statement