Button (按钮)

<template>
  <KunButton color="primary">Primary</KunButton>
  <KunButton color="secondary">Secondary</KunButton>
  <KunButton>Default</KunButton>
</template>

<template>
  <KunButton color="primary">primary</KunButton>
  <KunButton color="secondary">secondary</KunButton>
  <KunButton color="success">success</KunButton>
  <KunButton color="warning">warning</KunButton>
  <KunButton color="danger">danger</KunButton>
  <KunButton color="info">info</KunButton>
  <KunButton color="default">default</KunButton>
</template>

<template>
  <KunButton color="primary" variant="solid">solid</KunButton>
  <KunButton color="primary" variant="bordered">bordered</KunButton>
  <KunButton color="primary" variant="light">light</KunButton>
  <KunButton color="primary" variant="flat">flat</KunButton>
</template>

<template>
  <KunButton color="primary" size="xs">xs</KunButton>
  <KunButton color="primary" size="sm">sm</KunButton>
  <KunButton color="primary" size="md">md</KunButton>
  <KunButton color="primary" size="lg">lg</KunButton>
  <KunButton color="primary" size="xl">xl</KunButton>
</template>

<template>
  <KunButton color="primary" loading>Loading</KunButton>
  <KunButton color="primary" disabled>Disabled</KunButton>
  <!-- useKunMessage is auto-imported by the Nuxt layer; KunMessageProvider is
       mounted in app.vue. -->
  <KunButton color="primary" @click="useKunMessage('点击成功!', 'success')">
    Click me
  </KunButton>
</template>

<template>
  <!-- With an `href`, KunButton renders as a link (NuxtLink under the Nuxt
       layer, a native <a> in a plain Vue app). -->
  <KunButton color="primary" href="/components/button">Internal link</KunButton>
  <KunButton variant="bordered" href="https://github.com/kungal/kun-ui" target="_blank">
    External ↗
  </KunButton>
</template>