Components / Base / Chip
B5 · Base
Chip
A static label, a count, and a chip that can be removed.
<span class="chip">In review</span>
<span class="chip" data-chip>DOC-1042 <button type="button" data-remove-chip>Remove</button></span>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A short token sits inline with text.
- A removable token represents a current filter.
When not to use
- The chip is the main navigation. Use tabs.
- The text is a sentence.
Usage
<span class="chip">In review</span>
<span class="chip" data-chip>DOC-1042 <button type="button" data-remove-chip>Remove</button></span>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| .chip | class | — | Pill radius, 1 px line, 12 px type. |
| data-remove-chip | button | absent | Hides that chip in the preview. |
Keyboard
| Key | Action |
|---|---|
| Enter | On Remove, hides the chip. |
Accessibility
- Remove is a button inside the chip.
- A static chip is text, not a control.
Motion
- Removal is instant.
Pattern origin
Base control. .chip is in yravg-ui v1.0.