Chip

A compact tag: a label, an optional icon or avatar, and - given onClick - a button, and - given onDelete - a delete control.

Source

Demos

For usage examples, visit the component demo page: Chip

Import

import { Chip } from '@soroush.tech/design-system/Chip'

Props

Prop	Type	Default	Description
`label`	`ReactNode`	-	What the chip says. A long one truncates with an ellipsis.
`variant`	`'contained' \| 'outlined' \| 'text'`	`'contained'`	Filled, outlined, or only its text - as `Button`'s.
`color`	`keyof Theme['palette']`	`'default'`	Resolves to `theme.palette`.
`size`	`keyof Theme['sizes']`	`'md'`	Resolves against `theme.sizes`.
`shape`	`'square' \| 'rounded' \| 'pill'`	`'pill'`	The corners: 0, `theme.radii.md`, or fully round.
`borderRadius`	`keyof Theme['radii']`	`'md'`	The radius of a `'rounded'` chip; other shapes ignore it.
`icon`	`ReactNode`	-	An icon before the label. An `avatar` takes its place.
`avatar`	`ReactNode`	-	An avatar before the label.
`onClick`	`(event) => void`	-	Makes the chip a button.
`onDelete`	`(event) => void`	-	Shows a delete control, and deletes on Backspace and Delete.
`deleteLabel`	`string`	-	Names the delete control.
`disabled`	`boolean`	`false`	Stays as it is, off.
`className`, `data-testid`			On the root.

It takes the styled-system space props too.

Colors

A filled chip is the main of its color with the theme's contrastText on it, so its contrast is the theme's. Outlined, it is the color as its border and text; with no color ('default'), the theme's border.default and text.initial.

Customization

theme.components.Chip styles the root, the body (what is pressed: a button when clickable), the label, the icon, the avatar and the deleteIcon (the delete control). Its defaultProps set variant, color, size, shape, borderRadius and deleteLabel.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.