{
  "name": "ds-tag",
  "description": "Tag/badge component",
  "docUrl": "https://design.soracom.io/design-system/elements/tag/",
  "category": "elements",
  "htmlElements": [
    "span",
    "div",
    "label"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": [
      "--xsmall",
      "--small",
      "--medium",
      "--large"
    ],
    "color": "all",
    "visual-state": [
      "--alert",
      "--warning",
      "--success",
      "--info"
    ],
    "variant": [
      "--outline",
      "--pinned",
      "--flag",
      "--fence",
      "--fee",
      "--plan",
      "--ai",
      "--no-case"
    ],
    "shape": [
      "--square"
    ],
    "icon": "all",
    "state": [
      "--disabled"
    ],
    "special": [
      "--hide-label"
    ],
    "animation": [
      "--pulse",
      "--glow",
      "--blink"
    ]
  },
  "structure": {
    "requiredChildren": [
      "span"
    ],
    "wrapContent": "span"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<span class=\"ds-tag\"><span>Tag</span></span>"
    },
    {
      "name": "small",
      "html": "<span class=\"ds-tag --small\"><span>Small</span></span>"
    },
    {
      "name": "medium",
      "html": "<span class=\"ds-tag --medium\"><span>Medium</span></span>"
    },
    {
      "name": "large",
      "html": "<span class=\"ds-tag --large\"><span>Large</span></span>"
    },
    {
      "name": "alert",
      "html": "<span class=\"ds-tag --alert\"><span>Alert</span></span>"
    },
    {
      "name": "warning",
      "html": "<span class=\"ds-tag --warning\"><span>Warning</span></span>"
    },
    {
      "name": "success",
      "html": "<span class=\"ds-tag --success\"><span>Success</span></span>"
    },
    {
      "name": "info",
      "html": "<span class=\"ds-tag --info\"><span>Info</span></span>"
    },
    {
      "name": "color",
      "html": "<span class=\"ds-tag --color-blue\"><span>Blue</span></span>"
    },
    {
      "name": "outline",
      "html": "<span class=\"ds-tag --outline\"><span>Outline</span></span>"
    },
    {
      "name": "outline-color",
      "html": "<span class=\"ds-tag --outline --color-magenta\"><span>Magenta Outline</span></span>"
    },
    {
      "name": "with-icon",
      "html": "<span class=\"ds-tag --icon-check\"><span>With Icon</span></span>"
    },
    {
      "name": "with-inline-icon",
      "html": "<span class=\"ds-tag\"><i class=\"ds-icon --icon-user\"></i><span>Inline Icon</span></span>"
    },
    {
      "name": "with-strong",
      "html": "<span class=\"ds-tag\"><span><strong>Label</strong>Value</span></span>"
    },
    {
      "name": "with-close-button",
      "html": "<div class=\"ds-tag\"><span>Closable</span><button class=\"ds-button --plain --icon-cancel --small\"><span>Remove</span></button></div>"
    },
    {
      "name": "checkbox",
      "html": "<label class=\"ds-tag\"><input type=\"checkbox\" /><span>Selectable</span></label>"
    },
    {
      "name": "radio",
      "html": "<label class=\"ds-tag\"><input type=\"radio\" name=\"group\" /><span>Option</span></label>"
    },
    {
      "name": "pinned",
      "html": "<span class=\"ds-tag --pinned\"><span>Pinned</span></span>"
    },
    {
      "name": "fee",
      "html": "<span class=\"ds-tag --fee\"><span>Fee</span></span>"
    },
    {
      "name": "no-case",
      "html": "<span class=\"ds-tag --no-case\"><span>No Uppercase</span></span>"
    },
    {
      "name": "square",
      "html": "<span class=\"ds-tag --square\"><span>Square</span></span>"
    },
    {
      "name": "disabled",
      "html": "<label class=\"ds-tag\"><input type=\"checkbox\" disabled /><span>Disabled</span></label>"
    }
  ]
}