Chip
Removable tags and toggleable filter chips.
Removable
Design
Engineering
Research
<div class="mn-row">
<span class="mn-chip">Design<button class="mn-chip-remove" aria-label="Remove Design"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
<span class="mn-chip">Engineering<button class="mn-chip-remove" aria-label="Remove Engineering"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
<span class="mn-chip mn-primary">Research<button class="mn-chip-remove" aria-label="Remove Research"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
</div>Filters
<div class="mn-row" role="group" aria-label="Filters">
<button class="mn-chip" aria-pressed="true">All</button>
<button class="mn-chip" aria-pressed="false">Open</button>
<button class="mn-chip" aria-pressed="false">Closed</button>
<button class="mn-chip" aria-pressed="false">Mine</button>
</div>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/chip.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-chip | Base chip. |
| mn-chip-remove | Remove button: mian.js removes the chip and emits a cancelable mn:remove. |
| button.mn-chip[aria-pressed] | A filter chip that toggles. |
Accessibility
- Each remove button needs a label naming what it removes. Focus moves to the neighbouring chip after removal.