Chip

Compact labels with optional dismiss and avatar support.

Default

Technology Design Marketing Sales 
<span class="sui-chip">Technology</span>
<span class="sui-chip">Design</span>
<span class="sui-chip">Marketing</span>
<span class="sui-chip">Sales</span>

Dismissible

React Vue Angular Svelte 
<span class="sui-chip">React <button class="sui-chip-close" aria-label="Remove"></button></span>
<span class="sui-chip">Vue <button class="sui-chip-close" aria-label="Remove"></button></span>
<span class="sui-chip">Angular <button class="sui-chip-close" aria-label="Remove"></button></span>
<span class="sui-chip">Svelte <button class="sui-chip-close" aria-label="Remove"></button></span>

Colors

Default Primary Success Danger Warning Info 
<span class="sui-chip">Default</span>
<span class="sui-chip sui-chip-primary">Primary</span>
<span class="sui-chip sui-chip-success">Success</span>
<span class="sui-chip sui-chip-danger">Danger</span>
<span class="sui-chip sui-chip-warning">Warning</span>
<span class="sui-chip sui-chip-info">Info</span>

Outline

Default Primary Success Danger Warning Info 
<span class="sui-chip sui-chip-outline">Default</span>
<span class="sui-chip sui-chip-outline sui-chip-primary">Primary</span>
<span class="sui-chip sui-chip-outline sui-chip-success">Success</span>
<span class="sui-chip sui-chip-outline sui-chip-danger">Danger</span>
<span class="sui-chip sui-chip-outline sui-chip-warning">Warning</span>
<span class="sui-chip sui-chip-outline sui-chip-info">Info</span>

Sizes

Small Default Large 
<span class="sui-chip sui-chip-primary sui-chip-sm">Small</span>
<span class="sui-chip sui-chip-primary">Default</span>
<span class="sui-chip sui-chip-primary sui-chip-lg">Large</span>

With Avatar

A Alice B Bob C Carol D Dave 
<span class="sui-chip sui-chip-avatar">
  <img src="avatar.jpg" alt="Alice">
  Alice
</span>

<span class="sui-chip sui-chip-avatar sui-chip-primary">
  <img src="avatar.jpg" alt="Bob">
  Bob
</span>

<span class="sui-chip sui-chip-avatar sui-chip-outline sui-chip-success">
  <img src="avatar.jpg" alt="Carol">
  Carol
  <button class="sui-chip-close" aria-label="Remove"></button>
</span>

<span class="sui-chip sui-chip-avatar sui-chip-danger">
  <img src="avatar.jpg" alt="Dave">
  Dave
  <button class="sui-chip-close" aria-label="Remove"></button>
</span>

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.