WorkDS Docs Homepage

Chip

Displays a stylized element that represents a value or a related action.

Chip

API Reference

PropTypeDefault
color"blue" | "gray""blue"
weight"normal" | "bold""normal"
onRemovefunction

This component is based on the span element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

Use the color prop to control the color of the chip.

BlueGray

With icons

You may nest icons directly inside the chips. The correct gap between the icon and the text is provided automatically.

External domainsExternal domains

Weights

Use the weight prop to set the weight of the chip. Normally, you should use bold weight for chips that represent unique values, and regular weight for related actions.

foo-corp.comfoo-corp.co.uk3 more

With remove button

If you pass a onRemove function, a small button will be rendered on the right side of the chip.

workos.comfoo-corp.com

With Code component

You can compose Chip together with the Code component.

org_01GFM89469M29NMAEH52JPV2SQ

As button

Use the as prop to render the chip as a button. This prop adds styles for the interactive states, like hover and focus.