Chip

Chips are compact elements that represent an input, attribute, or action.

<Chip label="Value" onDelete={() => console.log('deleted')} />

Props

Prop	Type	Default	Description
avatar	element		The Avatar element to display
classes	object		Override or extend the styles applied to the component.
clickable	bool	true	If true, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not appear clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable. Note: this controls the UI and does not affect the onClick event.
color	'default' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning'	'primary'	The color of the component.
data-testid	string		data-testid added to the root element of the component as chip:{data-testid} and chip:{data-testid}:deleteicon for the deleteIcon
deleteIcon	element		Override the default delete icon element. Shown only if onDelete is set.
disabled	bool	false	If true, the component is disabled
icon	element		Icon element
label	node		The content of the component
onDelete	func		Callback fired when the delete icon is clicked. If set, the delete icon will be shown.
size	'medium' \| 'small'	'medium'	The size of the component
skipFocusWhenDisabled	bool	false	If true, allows the disabled chip to escape focus. If false, allows the disabled chip to receive focus
variant	'filled' \| 'outlined'	'outlined'	The variant to use

The ref is forwarded to the root element.

Examples

Outlined and Filled

<div style={{marginBottom: 4, display: 'flex', justifyContent: 'space-evenly'}}>
  <Chip label="Default" / >
  <Chip label="Error" color="error"/>
  <Chip label="Success" color="success"/>
  <Chip label="Info" color="info"/>
</div>
<div style={{ display: 'flex', justifyContent: 'space-evenly'}}>
  <Chip label="Default" variant="filled"/>
  <Chip label="Error" color="error" variant="filled"/>
  <Chip label="Success" color="success" variant="filled"/>
  <Chip label="Info" color="info" variant="filled"/>
</div>

Disabled

<div style={{marginBottom: 4, display: 'flex', justifyContent: 'space-evenly'}}>
  <Chip label="Default" disabled />
  <Chip label="Error" color="error" disabled/>
  <Chip label="Success" color="success" disabled/>
  <Chip label="Info" color="info" disabled/>
</div>
<div style={{ display: 'flex', justifyContent: 'space-evenly'}}>
  <Chip label="Default" variant="filled" disabled/>
  <Chip label="Error" color="error" variant="filled" disabled/>
  <Chip label="Success" color="success" variant="filled" disabled/>
  <Chip label="Info" color="info" variant="filled" disabled/>
</div>

Deletable

Can be deleted via keyboard with delete.

() => {
  const [chipData, setChipData] = React.useState([
    { key: 0, label: 'Default' },
    { key: 1, label: 'Error', color: 'error' },
    { key: 2, label: 'Success', color: 'success' },
    { key: 3, label: 'Info', color: 'info' },
  ]);

  const handleDelete = (chipToDelete) => () => {
    setChipData((chips) =>
      chips.filter((chip) => chip.key !== chipToDelete.key),
    );
  };

  return (
    <div
      style={{
        display: 'flex',
        justifyContent: 'space-evenly',
      }}
    >
      {chipData.map((data) => {
        return (
          <Chip
            key={data.key}
            label={data.label}
            color={data.color}
            onDelete={handleDelete(data)}
          />
        );
      })}
    </div>
  );
};

Active selection

This is only available when the onClick is defined.

<div style={{ display: 'flex', justifyContent: 'space-evenly' }}>
  <Chip
    label="Default"
    onClick={() => console.log('This is an onClick event')}
  />
  <Chip
    label="Error"
    color="error"
    onClick={() => console.log('This is an onClick event')}
  />
  <Chip
    label="Success"
    color="success"
    onDelete={() => console.log('This is an onDelete event')}
  />
  <Chip
    label="Info"
    color="info"
    onDelete={() => console.log('This is an onDelete event')}
  />
</div>

Size

<Chip label="Default" variant="filled" size="small" />
<Chip label="Default" variant="filled"  />