Chip 1.2.2

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

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Compact tags for filters, selected values, or categories with .velin-chip.
Removable or selectable tokens when the examples’ dismiss/select patterns fit.

When not

Static status counts next to a title — use Badge.
Full form multi-select with typeahead — use Combobox.

Variants

Default Primary Success Warning Danger Outline

<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>

Closable

Vue React

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

With Avatar

Jane Doe

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

Chip Group

HTML CSS JavaScript

<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>

Accessibility

Closable chips need aria-label on the close button (e.g. aria-label="Remove Tag").
Clickable chips should use <button> instead of <span>.

CSS Variables

Variable	Description
`--velin-color-surface-dim`	Default chip background
`--velin-color-border`	Default chip border
`--velin-color-primary-subtle`	Primary variant background
`--velin-radius-full`	Pill shape