按钮 Button

基础 · 可交互组件

主要操作、禁用与加载反馈

按需导入wbbb-ui/components/button

基础用法

<script setup lang="ts">
import { WbbbButton } from 'wbbb-ui/components/button'
import 'wbbb-ui/styles/button'
</script>

<template>
  <WbbbButton type="primary">确认提交</WbbbButton>
</template>

真实移动端预览新窗口打开 ↗

状态与交互

以下状态均可在右侧的真实 Playground 中操作与验收。

默认主色成功警告危险信息

API 参考

属性（Props）

属性	说明	类型	默认值	必填
`block`	是否让按钮占满可用宽度。	`boolean`	`false`	否
`disabled`	是否禁止用户与组件交互。	`boolean`	`false`	否
`formType`	设置按钮触发的原生表单动作。	`'submit' \\| 'reset'`	`undefined`	否
`icon`	设置图标名称或图标内容。	`string`	`''`	否
`loading`	是否显示加载状态，并在适用时阻止重复交互。	`boolean`	`false`	否
`loadingText`	设置加载过程显示的文案。	`string`	`''`	否
`openType`	设置按钮使用的 uni-app 开放能力类型。	`string`	`''`	否
`plain`	是否使用描边或低强调视觉样式。	`boolean`	`false`	否
`round`	是否使用全圆角或胶囊形外观。	`boolean`	`false`	否
`size`	设置组件尺寸。	`WbbbSize`	`'medium'`	否
`type`	设置组件的语义类型或样式变体。	`WbbbType`	`'default'`	否

事件（Events）

click

插槽（Slots）

default

双向绑定

不支持 v-model。

平台说明

构建验证：H5、App Vue、微信小程序、支付宝小程序与抖音小程序。

运行时差异：H5 支持键盘焦点与减弱动效；小程序端使用等价触控交互。上传、日期选择和服务弹层应在目标端再次验收。

使用提示：更多状态组合和跨端表现请在 Playground 中验证。

按钮 Button ​

基础用法 ​

状态与交互 ​

API 参考 ​