Chip

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

Source

A compact tag: a label, an optional icon or avatar, and - given onClick - a button, and - given onDelete - a delete control. A clickable chip is one tab stop. A deletable one deletes through its control and through Backspace and Delete on the chip, so the control itself is out of the tab order; it is a button of its own, not a child of the chip's, so pressing it never clicks the chip.

Every text is yours: the label, and the delete control's name (deleteLabel) - no built-in English.

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

;<Chip label="Design" color="primary" />
;<Chip label="Design" onClick={open} />
;<Chip label="Design" onDelete={remove} deleteLabel="Remove Design" />

Examples

Default

Tag

<Chip label="Tag" />

Variants

contained

outlined

text

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex flexDirection="row" gap={2} alignItems="center">
  {chipVariantValues.map((variant) => (
    <Chip key={variant} {...args} variant={variant} label={variant} />
  ))}
</Flex>

Colors

default

primary

secondary

success

error

info

warning

default

primary

secondary

success

error

info

warning

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex gap={2}>
  {(['contained', 'outlined'] as const).map((variant) => (
    <Flex key={variant} flexDirection="row" gap={1} alignItems="center">
      {buttonColorTokens.map((color) => (
        <Chip key={color} {...args} variant={variant} color={color} label={color} />
      ))}
    </Flex>
  ))}
</Flex>

Sizes

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex flexDirection="row" gap={2} alignItems="center">
  {textInputSizeTokens.map((size) => (
    <Chip key={size} {...args} size={size} label={size} />
  ))}
</Flex>

Shapes

square

rounded

pill

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex flexDirection="row" gap={2} alignItems="center">
  {(['square', 'rounded', 'pill'] as const).map((shape) => (
    <Chip key={shape} {...args} shape={shape} label={shape} />
  ))}
</Flex>

With Icon And Avatar

Starred

Masoud

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex flexDirection="row" gap={2} alignItems="center">
  <Chip {...args} label="Starred" icon={<Icon name="star" size="1em" color="inherit" />} />
  <Chip {...args} label="Masoud" avatar={<Avatar size="sm">M</Avatar>} variant="outlined" />
</Flex>

Clickable

const args: Partial<ChipProps> = { label: 'Tag' }

function Counter() {
  const [count, setCount] = useState(0)
  return <Chip {...args} label={`Clicked ${count}`} onClick={() => setCount((n) => n + 1)} />
}
return <Counter />

Deletable

Design

Code

Ship

const args: Partial<ChipProps> = { label: 'Tag' }

<Tags {...args} />

Disabled

const args: Partial<ChipProps> = { label: 'Tag', disabled: true }

<Chip {...args} onClick={() => {}} onDelete={() => {}} deleteLabel="Remove" />

Long Label

A label much longer than the room it has

const args: Partial<ChipProps> = { label: 'Tag' }

<Flex width="10rem">
  <Chip {...args} label="A label much longer than the room it has" />
</Flex>