Button 按钮

常用的操作按钮。

基础用法

使用 type、plain、round 和 circle 来定义按钮的样式。

<script setup>
import KButton from "@/components/Button/Button.vue";
</script>
<template>
  <div class="mb-4">
    <k-button> hello </k-button>
    <k-button type="primary"> Primary </k-button>
    <k-button type="warning"> Warning </k-button>
    <k-button type="danger"> Danger </k-button>
    <k-button loading> Loading </k-button>
  </div>
  <div class="mb-4">
    <k-button plain round> hello </k-button>
    <k-button type="primary" round> Primary </k-button>
    <k-button type="warning" round> Warning </k-button>
    <k-button type="danger" round> Danger </k-button>
    <k-button loading round> Loading </k-button>
  </div>
  <div>
    <k-button type="primary" icon="edit" circle></k-button>
    <k-button type="success" icon="check" circle></k-button>
    <k-button type="info" icon="message" circle></k-button>
    <k-button type="warning" icon="star" circle></k-button>
    <k-button type="danger" icon="trash-can" circle></k-button>
  </div>
</template>

Button Attributes

Name	Description	Type	Default
size	button size	enum - 'large'| 'small'	—
type	button type	enum - 'primary'| 'success'| 'warning'| 'danger'| 'info'	—
plain	determine whether it's a plain button	boolean	false
round	determine whether it's a round button	boolean	false
circle	determine whether it's a circle button	boolean	false
loading	determine whether it's loading	boolean	false
disabled	disable the button	boolean	false
icon	icon component	string	—
autofocus	same as native button's autofocus	boolean	false
native-type	same as native button's type	enum - 'button'| 'submit'| 'reset'	button