Component

Chips

Chips are compact UI elements that represent input, attribute, or action. They can include avatars, icons, and support for dismissing or editing.

<span class="quanta-chip quanta-chip-primary">Primary</span>
<span class="quanta-chip quanta-chip-success">Success</span>
<span class="quanta-chip quanta-chip-danger">Danger</span>

Primary Success Danger

Variants

Use .quanta-chip-outline-* for bordered styles:

<span class="quanta-chip quanta-chip-outline-primary">Primary</span>
<span class="quanta-chip quanta-chip-outline-success">Success</span>
<span class="quanta-chip quanta-chip-outline-danger">Danger</span>

Primary Success Danger

Sizes

Choose between small, default, and large sizes:

<span class="quanta-chip quanta-chip-sm quanta-chip-success">Small</span>
<span class="quanta-chip quanta-chip-success">Default</span>
<span class="quanta-chip quanta-chip-lg quanta-chip-success">Large</span>

Small Default Large

Closable Chips

Include a close button to dismiss a chip:

<span class="quanta-chip quanta-chip-warning">
  Alert
  <button class="quanta-chip-close" onclick="this.parentElement.remove()">×</button>
</span>

Alert

Avatars & Icons

Add images or icons to personalize chips:

<span class="quanta-chip quanta-chip-info">
  <img src="avatar.jpg" class="quanta-chip-img" />
  Cody
</span>

Cody