Chip

Playground

Adornments

Adornments are icons or other elements that can be added to the start or end of the Input component for additional interactivity or visual feedback:

Clickable

Chip becomes clickable with cursor-pointer applied when onClick is passed in props.

<Chip
  variant='outlined'
  label={'#flowers'}
  onClick={() => alert('Chip clicked')}
/>

What if I want a color other than available in color?

For this use case, you can use the style prop to customize the color of the chip. For example:

Be aware that this will override the default coloring styles of the chip. Notice that bg hover effect was lost as it came from now disabled color styling.

export const CustomChip = () => (
  <Chip
    variant='unstyled'
    label='Indefatigable'
    style={{
      color: 'rgba(255, 153, 0)',
      backgroundColor: 'rgba(255, 153, 0, 0.1)',
      borderColor: 'rgba(255, 153, 0, 0.5)',
    }}
  />
)

Component API

Chip

Chip component props