{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "chip",
  "name": "Chip",
  "category": "Data display",
  "description": "Removable tags and toggleable filter chips.",
  "tags": [
    "chip",
    "tag",
    "token",
    "filter",
    "removable",
    "input chips"
  ],
  "requiresJs": true,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": null,
    "intents": [
      "filter chips",
      "removable tags",
      "selected filters",
      "toggle filters"
    ],
    "prominence": null,
    "density": null,
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [],
    "avoid": null
  },
  "url": "https://mian.ro/components/chip",
  "markdownUrl": "https://mian.ro/ai/components/chip.md",
  "classes": [
    {
      "name": "mn-chip",
      "description": "Base chip."
    },
    {
      "name": "mn-chip-remove",
      "description": "Remove button: mian.js removes the chip and emits a cancelable mn:remove."
    },
    {
      "name": "button.mn-chip[aria-pressed]",
      "description": "A filter chip that toggles."
    }
  ],
  "accessibility": [
    "Each remove button needs a label naming what it removes. Focus moves to the neighbouring chip after removal."
  ],
  "examples": [
    {
      "title": "Removable",
      "description": null,
      "html": "<div class=\"mn-row\">\n  <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>\n  <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>\n  <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>\n</div>"
    },
    {
      "title": "Filters",
      "description": null,
      "html": "<div class=\"mn-row\" role=\"group\" aria-label=\"Filters\">\n  <button class=\"mn-chip\" aria-pressed=\"true\">All</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Open</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Closed</button>\n  <button class=\"mn-chip\" aria-pressed=\"false\">Mine</button>\n</div>"
    }
  ],
  "css": ".mn-chip {\n  display: inline-flex; align-items: center; gap: .35rem;\n  height: 1.875rem; padding: 0 .35rem 0 .7rem;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: 999px;\n  background: var(--mn-surface-2); color: var(--mn-fg);\n  font: 500 calc(var(--mn-text-sm) - 1px)/1 var(--mn-font); white-space: nowrap;\n}\n.mn-chip:not(:has(.mn-chip-remove)) { padding-inline-end: .7rem; }\n.mn-chip.mn-primary, .mn-chip.mn-accent, .mn-chip.mn-success, .mn-chip.mn-warning, .mn-chip.mn-danger, .mn-chip.mn-info {\n  background: color-mix(in oklab, var(--_c) 13%, transparent); color: var(--_ct); border-color: color-mix(in oklab, var(--_c) 30%, transparent);\n}\n.mn-chip > img { width: 1.35rem; height: 1.35rem; border-radius: 50%; margin-inline-start: -.45rem; object-fit: cover; }\n.mn-chip-remove {\n  display: grid; place-items: center; width: 1.25rem; height: 1.25rem;\n  border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .6; cursor: pointer;\n}\n.mn-chip-remove:hover { opacity: 1; background: var(--mn-active); }\n.mn-chip-remove:focus-visible { outline: none; box-shadow: var(--mn-focus); opacity: 1; }\n.mn-chip-remove svg { width: .8rem; height: .8rem; }\nbutton.mn-chip { cursor: pointer; }\nbutton.mn-chip[aria-pressed=\"true\"] { background: var(--mn-primary); color: var(--mn-primary-fg); border-color: var(--mn-primary); }",
  "js": "document.addEventListener('click', (e) => {\n  const x = e.target.closest('.mn-chip-remove');\n  if (x) {\n    const chip = x.closest('.mn-chip');\n    if (!chip || !emit(chip, 'remove', {}, true)) return;\n    const all = [...(chip.parentElement?.querySelectorAll('.mn-chip-remove') || [])];\n    const next = all[all.indexOf(x) + 1] || all[all.indexOf(x) - 1];\n    chip.remove();\n    next?.focus();\n    return;\n  }\n  const d = e.target.closest('[data-mn-dismiss]');\n  if (d) {\n    const target = d.closest(d.dataset.mnDismiss || '.mn-alert');\n    if (target && emit(target, 'dismiss', {}, true)) target.remove();\n  }\n  const chip = e.target.closest('button.mn-chip[aria-pressed]');\n  if (chip) chip.setAttribute('aria-pressed', String(chip.getAttribute('aria-pressed') !== 'true'));\n});",
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": "https://mian.ro/dist/mian.js",
    "registryItem": "https://mian.ro/r/chip.json"
  }
}