Button 按钮

Basic · Interactive component

Primary actions with disabled and loading feedback.

On-demand importwbbb-ui/components/button

Basic Usage

Example code

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

<template>
  <WbbbButton type="primary">Submit</WbbbButton>
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultPrimarySuccessWarningDangerInfo

API Reference

Props

Property	Description	Type	Default	Required
block	Makes the button occupy the full available width.	boolean	false	No
disabled	Prevents user interaction with the component.	boolean	false	No
formType	Sets the native form action performed by the button.	'submit' \| 'reset'	undefined	No
icon	Sets the icon name or icon content.	string	''	No
loading	Shows a loading state and blocks repeated interaction when applicable.	boolean	false	No
loadingText	Sets the text displayed while loading.	string	''	No
openType	Sets the uni-app open capability used by the button.	string	''	No
plain	Uses the outlined or low-emphasis visual style.	boolean	false	No
round	Uses fully rounded corners or a pill shape.	boolean	false	No
size	Sets the component size.	WbbbSize	'medium'	No
type	Sets the semantic type or variant of the component.	WbbbType	'default'	No

Events

• click

Slots

• default

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.