{
 "slug": "button",
 "mode": "scenarios",
 "examples": [
  {
   "id": "button-ex-1",
   "title": "类型（默认尺寸）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <button class=\"btn btn-primary btn-md\" id=\"demo-toggle\">主按钮（点击切加载态）</button>\n    <button class=\"btn btn-default btn-md\">次按钮</button>\n    <button class=\"btn btn-text btn-md\">文字按钮</button>\n    <button class=\"btn btn-link btn-md\">链接按钮</button>\n    <button class=\"btn btn-danger btn-md\">危险按钮</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      2
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"btn btn-primary btn-md\">主按钮（点击切加载态）</button>\n<button class=\"btn btn-default btn-md\">次按钮</button>\n<button class=\"btn btn-text btn-md\">文字按钮</button>\n<button class=\"btn btn-link btn-md\">链接按钮</button>\n<button class=\"btn btn-danger btn-md\">危险按钮</button>",
    "jsx": "import { useState } from 'react';\nimport { KoleButton } from 'kole-ui/react';\n\nexport default function ButtonTypeDemo() {\n  const [loading, setLoading] = useState(false);\n\n  function submit() {\n    setLoading(true);\n  }\n  function reset() {\n    setLoading(false);\n  }\n\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"default\" loading={loading} onClick={submit}>主按钮（点击切加载态）</KoleButton>\n      <KoleButton type=\"default\" size=\"default\" onClick={reset}>次按钮</KoleButton>\n      <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n      <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n      <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n    </>\n  );\n}",
    "vue3": "<template>\n  <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n  <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n  <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst loading = ref(false);\n\nfunction submit() {\n  loading.value = true;\n}\nfunction reset() {\n  loading.value = false;\n}\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n    <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n    <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n  </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data() {\n    return { loading: false };\n  },\n  methods: {\n    submit() {\n      this.loading = true;\n    },\n    reset() {\n      this.loading = false;\n    }\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleButton } from 'kole-ui/react';\n\nexport default function ButtonTypeDemo(): JSX.Element {\n  const [loading, setLoading] = useState<boolean>(false);\n\n  function submit(): JSX.Element {\n    setLoading(true);\n  }\n  function reset(): JSX.Element {\n    setLoading(false);\n  }\n\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"default\" loading={loading} onClick={submit}>主按钮（点击切加载态）</KoleButton>\n      <KoleButton type=\"default\" size=\"default\" onClick={reset}>次按钮</KoleButton>\n      <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n      <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n      <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n  <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n  <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst loading = ref<boolean>(false);\n\nfunction submit() {\n  loading.value = true;\n}\nfunction reset() {\n  loading.value = false;\n}\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" :loading=\"loading\" @click=\"submit\">主按钮（点击切加载态）</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" @click=\"reset\">次按钮</KoleButton>\n    <KoleButton type=\"text\" size=\"default\">文字按钮</KoleButton>\n    <KoleButton type=\"link\" size=\"default\">链接按钮</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\">危险按钮</KoleButton>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data(): Record<string, unknown> {\n    return { loading: false };\n  },\n  methods: {\n    submit(): void {\n      this.loading = true;\n    },\n    reset(): void {\n      this.loading = false;\n    }\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Button.html 类型行 5 个按钮的类名 btn-primary/btn-default/btn-text/btn-link/btn-danger 与演示 id=demo-toggle 的主按钮「点击切加载态」；type/size/loading/onClick 见 Button.jsx 形参，sizeMap 默认档为 default。"
   ]
  },
  {
   "id": "button-ex-2",
   "title": "尺寸（主按钮）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <button class=\"btn btn-primary btn-lg\">大尺寸</button>\n    <button class=\"btn btn-primary btn-md\">默认尺寸</button>\n    <button class=\"btn btn-primary btn-sm\">小尺寸</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"btn btn-primary btn-lg\">大尺寸</button>\n<button class=\"btn btn-primary btn-md\">默认尺寸</button>\n<button class=\"btn btn-primary btn-sm\">小尺寸</button>",
    "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n  <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</>",
    "vue3": "<template>\n  <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n    <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n    <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n  </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton }\n};\n</script>",
    "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n      <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n      <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n  <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('尺寸（主按钮）');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleButton type=\"primary\" size=\"large\">大尺寸</KoleButton>\n    <KoleButton type=\"primary\" size=\"default\">默认尺寸</KoleButton>\n    <KoleButton type=\"primary\" size=\"small\">小尺寸</KoleButton>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Button.html 尺寸行三个按钮的类名 btn-lg / btn-md / btn-sm，对应 Button.jsx 的 sizeMap { large: btn-lg, default: btn-md, small: btn-sm } 与 Button.vue2 props.size validator [large, default, small]。"
   ]
  },
  {
   "id": "button-ex-3",
   "title": "禁用态",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <button class=\"btn btn-primary btn-md btn-disabled\" disabled>主按钮</button>\n    <button class=\"btn btn-default btn-md btn-disabled\" disabled>次按钮</button>\n    <button class=\"btn btn-danger btn-md btn-disabled\" disabled>危险按钮</button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      4
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"btn btn-primary btn-md btn-disabled\" disabled>主按钮</button>\n<button class=\"btn btn-default btn-md btn-disabled\" disabled>次按钮</button>\n<button class=\"btn btn-danger btn-md btn-disabled\" disabled>危险按钮</button>",
    "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n  <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</>",
    "vue3": "<template>\n  <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n  </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton }\n};\n</script>",
    "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n      <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n      <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用态');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" disabled>主按钮</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" disabled>次按钮</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\" disabled>危险按钮</KoleButton>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Button.html 禁用行三个按钮的类名 btn-disabled 与原生 disabled 属性；Button.jsx 形参 disabled 与 Button.vue3 defineProps.disabled 同源，禁用态由 isDisabled = disabled || loading 决定。"
   ]
  },
  {
   "id": "button-ex-4",
   "title": "加载态",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <button class=\"btn btn-primary btn-md is-loading\">\n      <span class=\"spinner\"></span>\n      <span class=\"btn-label\">提交中</span>\n    </button>\n    <button class=\"btn btn-default btn-md is-loading\">\n      <span class=\"spinner\"></span>\n      <span class=\"btn-label\">加载中</span>\n    </button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      5
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      6
     ],
     [
      7
     ],
     [
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"btn btn-primary btn-md is-loading\">\n  <span class=\"spinner\"></span>\n  <span class=\"btn-label\">提交中</span>\n</button>\n<button class=\"btn btn-default btn-md is-loading\">\n  <span class=\"spinner\"></span>\n  <span class=\"btn-label\">加载中</span>\n</button>",
    "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n  <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</>",
    "vue3": "<template>\n  <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n  </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton }\n};\n</script>",
    "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n      <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('加载态');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" loading>提交中</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" loading>加载中</KoleButton>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Button.html 加载行两个按钮的类名 is-loading 与内联 span.spinner（演示文案「提交中」「加载中」）；loading 见 Button.jsx 形参与 Button.vue3 defineProps.loading，加载态由组件内部渲染 .spinner 与 .btn-label。",
    "TS 形态依据 TS-VARIANTS.md：tsx 用 ReadonlyArray + key 循环（同一件事的 TS 写法），vue3ts/vue2ts 用 <script lang=\"ts\"> + 局部 type ButtonKind；不引入 kole-ui 的类型（本仓库不随包发布 .d.ts）"
   ]
  },
  {
   "id": "button-ex-5",
   "title": "带图标（内联 SVG 占位）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <button class=\"btn btn-primary btn-md\">\n      <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M12 5v14M5 12h14\"></path>\n      </svg>\n      新建\n    </button>\n    <button class=\"btn btn-default btn-md\">\n      <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"></path>\n      </svg>\n      导出\n    </button>\n    <button class=\"btn btn-danger btn-md\">\n      <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"></path>\n      </svg>\n      删除\n    </button>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      6
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      7
     ],
     [
      6,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<button class=\"btn btn-primary btn-md\">\n  <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 5v14M5 12h14\"></path>\n  </svg>\n  新建\n</button>\n<button class=\"btn btn-default btn-md\">\n  <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\"></path>\n  </svg>\n  导出\n</button>\n<button class=\"btn btn-danger btn-md\">\n  <svg class=\"btn-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n    <path d=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\"></path>\n  </svg>\n  删除\n</button>",
    "jsx": "import { KoleButton } from 'kole-ui/react';\n\n<>\n  <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</>",
    "vue3": "<template>\n  <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</template>\n\n<script setup>\nimport { KoleButton } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n  </div>\n</template>\n\n<script>\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton }\n};\n</script>",
    "tsx": "import { KoleButton } from 'kole-ui/react';\n\nexport default function KoleButtonDemo(): JSX.Element {\n  return (\n    <>\n      <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n      <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n      <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n  <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n  <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleButton } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('带图标（内联 SVG 占位）');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleButton type=\"primary\" size=\"default\" icon=\"M12 5v14M5 12h14\">新建</KoleButton>\n    <KoleButton type=\"default\" size=\"default\" icon=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3\">导出</KoleButton>\n    <KoleButton type=\"danger\" size=\"default\" icon=\"M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6\">删除</KoleButton>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleButton } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleButton },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Button.html 图标行三条内联 svg.btn-icon 的 path d 值（新建 M12 5v14M5 12h14、导出 M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3、删除 M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6）；Button.jsx 的 icon prop 即 svg path d，组件内部渲染同样结构的 svg.btn-icon。"
   ]
  }
 ],
 "curated": true
}