Button 按钮

常用的操作按钮。

代码示例

按钮状态(status)

使用 status 来定义按钮的状态，对应不同的按钮颜色。

可选值为 normal、success、warning、danger 四种状态，默认为 default。

其中默认按钮字体颜色继承自外部容器。

查看代码

vue

<template>
  <div>
    <bf-button>默认按钮</bf-button>
    <bf-button status="normal">主要按钮</bf-button>
    <bf-button status="success">成功按钮</bf-button>
    <bf-button status="warning">警告按钮</bf-button>
    <bf-button status="danger">危险按钮</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

按钮类型(type)

使用 type 来定义按钮的类型，对应不同的边框样式。

可选值为 outline、dashed、text 三种类型，默认为 default。

其中文字类型的按钮也是有背景色的，只是没有边框。想要没有背景色的文字按钮请通过 ghost 属性定义成幽灵按钮。

查看代码

vue

<template>
  <div>
    <bf-button>默认按钮</bf-button>
    <bf-button status="normal">主要按钮</bf-button>
    <bf-button status="success">成功按钮</bf-button>
    <bf-button status="warning">警告按钮</bf-button>
    <bf-button status="danger">危险按钮</bf-button>
    <br />
    <bf-button type="outline">描边类型</bf-button>
    <bf-button status="normal" type="outline">描边类型</bf-button>
    <bf-button status="success" type="outline">描边类型</bf-button>
    <bf-button status="warning" type="outline">描边类型</bf-button>
    <bf-button status="danger" type="outline">描边类型</bf-button>
    <br />
    <bf-button type="dashed">虚线类型</bf-button>
    <bf-button status="normal" type="dashed">虚线类型</bf-button>
    <bf-button status="success" type="dashed">虚线类型</bf-button>
    <bf-button status="warning" type="dashed">虚线类型</bf-button>
    <bf-button status="danger" type="dashed">虚线类型</bf-button>
    <br />
    <bf-button type="text">文字类型</bf-button>
    <bf-button status="normal" type="text">文字类型</bf-button>
    <bf-button status="success" type="text">文字类型</bf-button>
    <bf-button status="warning" type="text">文字类型</bf-button>
    <bf-button status="danger" type="text">文字类型</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 10px;
}
</style>

幽灵按钮(ghost)

使用 ghost 来定义按钮是否为幽灵按钮。

幽灵按钮背景透明，默认字体颜色继承自外部容器，常用于有色背景上。

查看代码

vue

<template>
  <div style="padding: 15px 10px 0; background: #262626; color: rgba(255, 255, 255, .85);">
    <bf-button ghost>幽灵按钮</bf-button>
    <bf-button status="normal" ghost>幽灵按钮</bf-button>
    <bf-button status="success" ghost>幽灵按钮</bf-button>
    <bf-button status="warning" ghost>幽灵按钮</bf-button>
    <bf-button status="danger" ghost>幽灵按钮</bf-button>
    <br />
    <bf-button type="outline" ghost>描边类型</bf-button>
    <bf-button status="normal" type="outline" ghost>描边类型</bf-button>
    <bf-button status="success" type="outline" ghost>描边类型</bf-button>
    <bf-button status="warning" type="outline" ghost>描边类型</bf-button>
    <bf-button status="danger" type="outline" ghost>描边类型</bf-button>
    <br />
    <bf-button type="dashed" ghost>虚线类型</bf-button>
    <bf-button status="normal" type="dashed" ghost>虚线类型</bf-button>
    <bf-button status="success" type="dashed" ghost>虚线类型</bf-button>
    <bf-button status="warning" type="dashed" ghost>虚线类型</bf-button>
    <bf-button status="danger" type="dashed" ghost>虚线类型</bf-button>
    <br />
    <bf-button type="text" ghost>文字类型</bf-button>
    <bf-button status="normal" type="text" ghost>文字类型</bf-button>
    <bf-button status="success" type="text" ghost>文字类型</bf-button>
    <bf-button status="warning" type="text" ghost>文字类型</bf-button>
    <bf-button status="danger" type="text" ghost>文字类型</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 15px;
}
</style>

按钮尺寸(size)

使用 size 来定义按钮的尺寸大小。

支持 small、default、large 三种尺寸，默认为 default。

查看代码

vue

<template>
  <div>
    <bf-button status="normal" size="small">小型按钮</bf-button>
    <bf-button status="normal" size="small" type="outline">小型按钮</bf-button>
    <bf-button status="normal" size="small" round>小型按钮</bf-button>
    <bf-button status="normal" size="small" round type="outline">小型按钮</bf-button>
    <br />
    <bf-button status="normal" size="default">默认按钮</bf-button>
    <bf-button status="normal" type="outline">默认按钮</bf-button>
    <bf-button status="normal" round>默认按钮</bf-button>
    <bf-button status="normal" round type="outline">默认按钮</bf-button>
    <br />
    <bf-button status="normal" size="large">大型按钮</bf-button>
    <bf-button status="normal" size="large" type="outline">大型按钮</bf-button>
    <bf-button status="normal" size="large" round>大型按钮</bf-button>
    <bf-button status="normal" size="large" round type="outline">大型按钮</bf-button>
    <br />
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 15px;
}
</style>

圆角按钮(round)

使用 round 来定义按钮是否圆角。

查看代码

vue

<template>
  <div>
    <bf-button>默认按钮</bf-button>
    <bf-button status="normal">主要按钮</bf-button>
    <bf-button status="success">成功按钮</bf-button>
    <bf-button status="warning">警告按钮</bf-button>
    <bf-button status="danger">危险按钮</bf-button>
    <br />
    <bf-button round>圆角形状</bf-button>
    <bf-button status="normal" round>圆角形状</bf-button>
    <bf-button status="success" round>圆角形状</bf-button>
    <bf-button status="warning" round>圆角形状</bf-button>
    <bf-button status="danger" round>圆角形状</bf-button>
    <br />
    <bf-button type="outline" round>描边类型</bf-button>
    <bf-button status="normal" type="outline" round>描边类型</bf-button>
    <bf-button status="success" type="outline" round>描边类型</bf-button>
    <bf-button status="warning" type="outline" round>描边类型</bf-button>
    <bf-button status="danger" type="outline" round>描边类型</bf-button>
    <br />
    <bf-button type="dashed" round>虚线类型</bf-button>
    <bf-button status="normal" type="dashed" round>虚线类型</bf-button>
    <bf-button status="success" type="dashed" round>虚线类型</bf-button>
    <bf-button status="warning" type="dashed" round>虚线类型</bf-button>
    <bf-button status="danger" type="dashed" round>虚线类型</bf-button>
    <br />
    <bf-button type="text" round>文字类型</bf-button>
    <bf-button status="normal" type="text" round>文字类型</bf-button>
    <bf-button status="success" type="text" round>文字类型</bf-button>
    <bf-button status="warning" type="text" round>文字类型</bf-button>
    <bf-button status="danger" type="text" round>文字类型</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 10px;
}
</style>

圆形按钮(circle)

使用 circle 来定义设置按钮是否为圆形，常用于图标按钮或单字符按钮。

注意 round 与 circle 的不同之处，前者并不是正圆形。

查看代码

vue

<template>
  <div>
    <bf-button status="success" size="small" round icon="setting"></bf-button>
    <bf-button status="danger" round icon="delete"></bf-button>
    <bf-button status="normal" size="large" round icon="search"></bf-button>
    <bf-button status="warning" round>赏</bf-button>
    <bf-button status="default" size="small" round icon="close"></bf-button>
    <hr />
    <bf-button status="success" size="small" circle icon="setting"></bf-button>
    <bf-button status="danger" circle icon="delete"></bf-button>
    <bf-button status="normal" size="large" circle icon="search"></bf-button>
    <bf-button status="warning" circle>赏</bf-button>
    <bf-button status="default" size="small" circle icon="close"></bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

禁用按钮(disabled)

使用 disabled 来定义按钮是否被禁用。

查看代码

vue

<template>
  <div>
    <bf-button>默认按钮</bf-button>
    <bf-button status="normal">主要按钮</bf-button>
    <bf-button status="success">成功按钮</bf-button>
    <bf-button status="warning">警告按钮</bf-button>
    <bf-button status="danger">危险按钮</bf-button>
    <br />
    <bf-button disabled>默认按钮</bf-button>
    <bf-button status="normal" disabled>主要按钮</bf-button>
    <bf-button status="success" disabled>成功按钮</bf-button>
    <bf-button status="warning" disabled>警告按钮</bf-button>
    <bf-button status="danger" disabled>危险按钮</bf-button>
    <br /><br />
    <bf-button type="outline">描边类型</bf-button>
    <bf-button status="normal" type="outline">描边类型</bf-button>
    <bf-button status="success" type="outline">描边类型</bf-button>
    <bf-button status="warning" type="outline">描边类型</bf-button>
    <bf-button status="danger" type="outline">描边类型</bf-button>
    <br />
    <bf-button type="outline" disabled>描边类型</bf-button>
    <bf-button status="normal" type="outline" disabled>描边类型</bf-button>
    <bf-button status="success" type="outline" disabled>描边类型</bf-button>
    <bf-button status="warning" type="outline" disabled>描边类型</bf-button>
    <bf-button status="danger" type="outline" disabled>描边类型</bf-button>
    <br /><br />
    <bf-button type="dashed">虚线类型</bf-button>
    <bf-button status="normal" type="dashed">虚线类型</bf-button>
    <bf-button status="success" type="dashed">虚线类型</bf-button>
    <bf-button status="warning" type="dashed">虚线类型</bf-button>
    <bf-button status="danger" type="dashed">虚线类型</bf-button>
    <br />
    <bf-button type="dashed" disabled>虚线类型</bf-button>
    <bf-button status="normal" type="dashed" disabled>虚线类型</bf-button>
    <bf-button status="success" type="dashed" disabled>虚线类型</bf-button>
    <bf-button status="warning" type="dashed" disabled>虚线类型</bf-button>
    <bf-button status="danger" type="dashed" disabled>虚线类型</bf-button>
    <br /><br />
    <bf-button type="text">文字类型</bf-button>
    <bf-button status="normal" type="text">文字类型</bf-button>
    <bf-button status="success" type="text">文字类型</bf-button>
    <bf-button status="warning" type="text">文字类型</bf-button>
    <bf-button status="danger" type="text">文字类型</bf-button>
    <br />
    <bf-button type="text" disabled>文字类型</bf-button>
    <bf-button status="normal" type="text" disabled>文字类型</bf-button>
    <bf-button status="success" type="text" disabled>文字类型</bf-button>
    <bf-button status="warning" type="text" disabled>文字类型</bf-button>
    <bf-button status="danger" type="text" disabled>文字类型</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 15px;
}
</style>

图标按钮(icon)

可以使用 Button 组件的 icon 属性来定义图标，也可以直接在 Button 内放置 Icon 组件。

对于纯图标按钮，两种方法的效果相同；
对于文字图标按钮，使用后者需要在文字后手动添加空格，以确保文字与图标的间距。

纯图标按钮，两种方法效果相同：

图标在文字前面（使用 Button 组件的 icon 属性）：

图标在文字后面（在 Button 中直接放置 Icon 组件）：

两种方法结合，可以自定义文字前后图标的显示：

查看代码

vue

<template>
  <div>
    <div style="margin-bottom: 8px;">纯图标按钮，两种方法效果相同：</div>
    <bf-button icon="bell" status="normal"></bf-button>
    <bf-button icon="bell" status="normal" type="outline"></bf-button>
    <bf-button icon="bell" type="text"></bf-button>
    <bf-button icon="bell" status="normal" round></bf-button>
    <bf-button icon="bell" status="normal" type="outline" round></bf-button>
    <bf-button icon="bell" type="text" round></bf-button>
    <br />
    <bf-button status="normal"><bf-icon name="bell"></bf-icon></bf-button>
    <bf-button status="normal" type="outline"><bf-icon name="bell"></bf-icon></bf-button>
    <bf-button type="text"><bf-icon name="bell"></bf-icon></bf-button>
    <bf-button status="normal" round><bf-icon name="bell"></bf-icon></bf-button>
    <bf-button status="normal" type="outline" round><bf-icon name="bell"></bf-icon></bf-button>
    <bf-button type="text" round><bf-icon name="bell"></bf-icon></bf-button>
    <br />
    <div style="margin: 10px 0;">图标在文字前面（使用 Button 组件的 icon 属性）：</div>
    <bf-button icon="setting">默认按钮</bf-button>
    <bf-button icon="loading" status="normal">加载</bf-button>
    <bf-button icon="bell" status="success">订阅</bf-button>
    <bf-button icon="experiment" status="warning">实验</bf-button>
    <bf-button icon="delete" status="danger">删除</bf-button>
    <br />
    <bf-button icon="setting" type="outline">边框按钮</bf-button>
    <bf-button icon="loading" status="normal" type="outline">加载</bf-button>
    <bf-button icon="bell" status="success" type="outline">订阅</bf-button>
    <bf-button icon="experiment" status="warning" type="outline">实验</bf-button>
    <bf-button icon="delete" status="danger" type="outline">删除</bf-button>
    <br />
    <bf-button icon="setting" type="dashed">虚线按钮</bf-button>
    <bf-button icon="loading" status="normal" type="dashed">加载</bf-button>
    <bf-button icon="bell" status="success" type="dashed">订阅</bf-button>
    <bf-button icon="experiment" status="warning" type="dashed">实验</bf-button>
    <bf-button icon="delete" status="danger" type="dashed">删除</bf-button>
    <br />
    <bf-button icon="setting" type="text">文字按钮</bf-button>
    <bf-button icon="loading" status="normal" type="text">加载</bf-button>
    <bf-button icon="bell" status="success" type="text">订阅</bf-button>
    <bf-button icon="experiment" status="warning" type="text">实验</bf-button>
    <bf-button icon="delete" status="danger" type="text">删除</bf-button>
    <br />
    <bf-button icon="setting" disabled>禁用按钮</bf-button>
    <bf-button icon="loading" disabled>禁用</bf-button>
    <bf-button icon="bell" disabled>禁用</bf-button>
    <bf-button icon="experiment" disabled>禁用</bf-button>
    <bf-button icon="delete" disabled>禁用</bf-button>
    <br />
    <div style="margin: 10px 0;">图标在文字后面（在 Button 中直接放置 Icon 组件）：</div>
    <bf-button>设置 <bf-icon name="setting"></bf-icon></bf-button>
    <bf-button status="normal">加载 <bf-icon name="loading"></bf-icon></bf-button>
    <bf-button status="success">订阅 <bf-icon name="bell"></bf-icon></bf-button>
    <bf-button status="warning">实验 <bf-icon name="experiment"></bf-icon></bf-button>
    <bf-button status="danger">删除 <bf-icon name="delete"></bf-icon></bf-button>
    <br />
    <div style="margin: 10px 0;">两种方法结合，可以自定义文字前后图标的显示：</div>
    <bf-button icon="setting">展开</bf-button>
    <bf-button icon="setting">展开 <bf-icon name="unfold"></bf-icon></bf-button>
    <bf-button>更多 <bf-icon name="unfold"></bf-icon></bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton, BfIcon } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.bf-button {
  margin-bottom: 10px;
}
</style>

加载按钮(loading)

使用 loading 来定义按钮是否处于加载中。

点击试试

查看代码

vue

<template>
  <div>
    <bf-button status="normal" icon="save" @click="onSave" :loading="loading">保存</bf-button>
    <span style="padding-left: 10px;">{{ msg }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { BfButton } from '@bf-teams/bfui-vue';

// data
const loading = ref(false)
const msg = ref('点击试试')

// methods
const onSave = () => {
  // 当非加载状态时才会执行相关代码，防止用户频繁点击
  if (!loading.value) {
    msg.value = '正在保存…'
    loading.value = true
    setTimeout(
      function () {
        msg.value = '保存成功！'
        loading.value = false
      }, 3000
    )
  }
}
</script>

宽按钮(block)

Block 按钮在宽度上充满其所在的父容器，常见于移动端和一些表单场景中。

是否删除该信息？

账号登录

查看代码

vue

<template>
  <div>
    <!-- 表单示例1 -->
    <div class="form-wrap">
      <div class="form-content">是否删除该信息？</div>
      <div class="form-btn">
        <bf-button block>取消</bf-button>
        <bf-button status="danger" block>删除</bf-button>
      </div>
    </div>
    <!-- 表单示例2 -->
    <div class="form-wrap" style="margin-top: 20px;">
      <div class="form-title">账号登录</div>
      <div class="form-content">
        <input type="text" class="account" placeholder="请输入账号" />
        <input type="password" class="password" placeholder="请输入密码" />
      </div>
      <div class="form-btn">
        <bf-button status="normal" size="large" round block>登录</bf-button>
        <!-- <bf-button size="large" round block>注册</bf-button> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.form-wrap {
  max-width: 350px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  .form-title {
    font-size: 20px;
    text-align: left;
    margin-bottom: 10px;
  }
  .form-content {
    padding-bottom: 10px;
    input {
      background-color: rgba(161, 161, 161, .1);
      width: 100%;
      height: 35px;
      margin: 5px 0;
      padding: 0 10px;
      border: 1px solid #1677ff;
      border-radius: 4px;
    }
  }
  .form-btn {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>

自定义样式

考虑到按钮的背景、文字、悬浮和点击样式都会影响按钮的整体美观性，故不再提供单独参数来定义按钮颜色。如有需求，请直接通过 CSS 控制按钮颜色或其他样式。

简单样式可以在 style 属性直接采用内联写法，复杂样式就通过内嵌和外部 CSS 来实现。发挥创造力可以实现渐变色、方形、圆角矩形、流光动画等更复杂样式按钮。如果某样式未生效可能是由于优先级不足，可尝试添加 !important 提高应用优先权。

查看代码

vue

<template>
  <div>
    <bf-button class="btn1" icon="cloud-upload">投稿</bf-button>
    <bf-button class="btn1" icon="add">关注</bf-button>
    <bf-button
      class="btn1"
      style="border: 1px solid #ff668f; background: white !important; color: #ff668f;"
      >为TA充电</bf-button
    >
    <bf-button class="btn1" icon="delete" disabled>删除</bf-button>

    <br /><br />

    <bf-button class="btn2" icon="experiment">渐变色</bf-button>

    <bf-button
      class="btn3"
      status="normal"
      icon="bell"
      style="width: 30px; height: 30px; padding: 0;"
    ></bf-button>

    <bf-button
      class="btn3"
      status="normal"
      icon="bell"
      style="width: 50px; height: 50px; padding: 0; font-size: 20px"
    ></bf-button>

    <bf-button
      class="btn3"
      status="success"
      icon="setting"
      style="width: 60px; height: 60px; padding: 0; font-size: 30px; border-radius: 15px;"
    ></bf-button>

    <bf-button
      class="btn3"
      status="normal"
      icon="voice"
      style="width: 80px; height: 80px; padding: 0; border-radius: 40px; font-size: 40px;"
    ></bf-button>

    <br /><br />

    <bf-button
      class="btn4"
      status="warning"
      icon="bell"
      style="width: 325px; height: 45px; font-size: 16px;"
      >自定义宽高和字体等</bf-button
    >

    <br /><br />

    <bf-button class="btn5" status="normal">登录</bf-button>

    <br /><br />

    <bf-button class="btn6">bfui 流光溢彩</bf-button>
  </div>
</template>

<script setup lang="ts">
import { BfButton } from '@bf-teams/bfui-vue';
</script>

<style lang="less" scoped>
.btn1 {
  background-color: #ff668f !important;
  color: white;
}
.btn1:hover {
  background-color: #ff8fa9 !important;
  color: white;
}
.btn1:active {
  background-color: #ff668f !important;
  color: white;
}

.btn2 {
  background: linear-gradient( -45deg, #8eff61, #47caff );
}

.bf-button.btn5 {
  width: 300px;
  height: 50px;
  border-radius: 25px;
  font-size: 16px;
  letter-spacing: 20px;
  text-indent: 20px;
}

.bf-button.btn6 {
  position: relative;
  font-size: 24px;
  font-weight: bold;
  padding: 0;
  // 角度渐变
  background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
  background-size: 400%;
  width: 320px;
  height: 80px;
  line-height: 80px;
  color: white;
  border-radius: 50px;
  z-index: 1;
  // 英文字母大写
  text-transform: uppercase;
  // 动画
  animation: flowing 8s infinite;
}
// 利用伪元素为按钮增加模糊背景和线条流光
.btn6::before{
	content: "";
	position: absolute;
	left: -5px;
	right: -5px;
	top:-5px;
	bottom: -5px;
	background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
	background-size: 400%;
	border-radius: 50px;
	filter: blur(10px);
	z-index: -1;
  // 动画
  animation: flowing 8s infinite;
}
// 定义流光动画
@keyframes flowing{
	100%{
		background-position: -400% 0;
	}
}
</style>

API

Button Props

属性 Attribute	说明 Description	类型 Type	默认值 Default
status	设置按钮状态（按钮颜色），可选值为 `normal`、`success`、`warning`、`danger`	String	`default`
type	设置按钮类型（边框样式），可选值为 `outline`、`dashed`、`text`，分别表现为：描边按钮、虚线按钮、文字按钮	String	`default`
ghost	幽灵属性，使内容反色，背景透明，常用在有色背景上。	Boolean	`false`
size	调节尺寸大小，可选值为 `small`、`default`、`large`	String	`default`
round	设置按钮是否圆角	Boolean	`false`
circle	设置按钮是否为圆形	Boolean	`false`
disabled	是否为禁用状态	Boolean	`false`
icon	设置按钮的图标	String	-
loading	是否为加载中状态 (相当于 disabled 属性 + icon 属性)	Boolean	`false`
block	是否为块级元素，宽度将撑满父容器	Boolean	`false`

Button Events

事件 Event	说明 Description	回调参数 Arguments
click	点击按钮时触发	`event: MouseEvent`

通用型

布局型

数据录入型

反馈型

Button 按钮

代码示例

按钮状态(status)

按钮类型(type)

幽灵按钮(ghost)

按钮尺寸(size)

圆角按钮(round)

圆形按钮(circle)

禁用按钮(disabled)

图标按钮(icon)

加载按钮(loading)

宽按钮(block)

自定义样式

API

Button Props

Button Events

Button 按钮 #

代码示例 #

按钮状态(status) #

按钮类型(type) #

幽灵按钮(ghost) #

按钮尺寸(size) #

圆角按钮(round) #

圆形按钮(circle) #

禁用按钮(disabled) #

图标按钮(icon) #

加载按钮(loading) #

宽按钮(block) #

自定义样式 #

API #

Button Props #

Button Events #

Button 按钮

代码示例

按钮状态(status)

按钮类型(type)

幽灵按钮(ghost)

按钮尺寸(size)

圆角按钮(round)

圆形按钮(circle)

禁用按钮(disabled)

图标按钮(icon)

加载按钮(loading)

宽按钮(block)

自定义样式

API

Button Props

Button Events