Chip

Compact element representing an input, attribute, or action. Chips are often used for tags, filters, or selections.

Storybook documentation (opens in new tab)

Chip

React

<Chip>Chip</Chip>

CSS

<div class="chip">
  <span class="chip_content">Chip</span>
</div>

Props

Color

Paper

Primary

Secondary

Success

Info

Warning

Error

React

<Chip>Paper</Chip>
<Chip color="primary">Primary</Chip>
<Chip color="secondary">Secondary</Chip>
<Chip color="success">Success</Chip>
<Chip color="info">Info</Chip>
<Chip color="warning">Warning</Chip>
<Chip color="error">Error</Chip>

CSS

<div class="chip fill-paper"><span class="chip_content">Paper</span></div>
<div class="chip fill-primary"><span class="chip_content">Primary</span></div>
<div class="chip fill-secondary"><span class="chip_content">Secondary</span></div>
<div class="chip fill-success"><span class="chip_content">Success</span></div>
<div class="chip fill-info"><span class="chip_content">Info</span></div>
<div class="chip fill-warning"><span class="chip_content">Warning</span></div>
<div class="chip fill-error"><span class="chip_content">Error</span></div>

Dense

Default

Dense

React

<Chip>Default</Chip>
<Chip dense>Dense</Chip>

CSS

<div class="chip"><span class="chip_content">Default</span></div>
<div class="chip chip-dense"><span class="chip_content">Dense</span></div>

Avatar

John Doe

React

<Chip avatar="https://i.pravatar.cc/40?img=1">John Doe</Chip>

CSS

<div class="chip">
  <img class="chip_avatar" src="https://i.pravatar.cc/40?img=1" alt="" />
  <span class="chip_content">John Doe</span>
</div>

Dismissible

Use the onClose prop to add a close button.

Dismissible

React

<Chip onClose={() => handleClose()}>Dismissible</Chip>

CSS

<div class="chip">
  <span class="chip_content">Dismissible</span>
  <button class="chip_close" aria-label="Remove">×</button>
</div>

Disabled

Disabled

React

<Chip disabled>Disabled</Chip>

CSS

<div class="chip chip-disabled"><span class="chip_content">Disabled</span></div>