1. Docs
2. Komponenten
3. Chip

Chip 1.2.0

Compact elements for tags, filters, and selections with .velin-chip. Available in five colour variants with outline, closable, avatar, and chip group. English: Chip

Wann verwenden

• Kompakte Tags fuer Filter, ausgewaehlte Werte oder Kategorien mit .velin-chip.
• Removable or selectable tokens when the examples’ dismiss/select patterns fit.

Wann nicht verwenden

• Static status counts next to a title — use Badge.
• Vollstaendige Formular-Multiselects mit Typahead: verwende Combobox.

Varianten

<span class="velin-chip">Default</span>
<span class="velin-chip velin-chip--primary">Primary</span>
<span class="velin-chip velin-chip--success">Success</span>
<span class="velin-chip velin-chip--warning">Warning</span>
<span class="velin-chip velin-chip--danger">Danger</span>
<span class="velin-chip velin-chip--outline">Outline</span>

Schliessbar

<span class="velin-chip velin-chip--primary">
  Vue
  <button class="velin-chip__close" aria-label="Remove Vue">&times;</button>
</span>

Mit Avatar

VorschauHTML

Jane Doe

Kopieren

<span class="velin-chip">
  <img class="velin-chip__avatar" src="avatar.jpg" alt="Jane">
  Jane Doe
</span>

Chip-Gruppe

<div class="velin-chip-group">
  <span class="velin-chip velin-chip--primary">HTML</span>
  <span class="velin-chip velin-chip--primary">CSS</span>
  <span class="velin-chip velin-chip--primary">JavaScript</span>
</div>

Barrierefreiheit

• Schliessbar chips need aria-label on the close button (e.g. aria-label="Tag entfernen").
• Klickbar chips should use <button> instead of <span>.

CSS-Variablen

Verwandt

• Badge
• Combobox
• Schliessen Button