Button 按钮

最近更新时间:2026-01-13 11:20:12

我的收藏

组件功能

用于触发操作的交互式按钮组件,支持多种样式、尺寸和图标配置。

基础用法

通过 label 设置按钮文本,点击时触发 onClickAction 配置的动作,可结合图标和样式配置自定义按钮外观。
Template 示例:
<Button label="点击按钮" style="primary" />
效果展示如下:




属性说明

属性名
类型
描述
默认值
label
string
按钮文本
-
onClickAction
ActionConfig
点击事件配置
-
iconStart
string
起始图标名称
-
iconEnd
string
结束图标名称
-
iconSize
"sm" | "md" | "lg" | "xl" | "2xl"
图标尺寸
"md"
submit
boolean
是否为提交按钮
false
style
"primary" | "secondary"
按钮风格
-
color
"primary" | "secondary" | "info" | "success" | "warning" | "danger"
按钮颜色
"primary"
variant
"solid" | "soft" | "outline" | "ghost"
按钮变体样式
"solid"
size
"3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
按钮尺寸
"md"
pill
boolean
是否为胶囊形状
false
uniform
boolean
统一宽度
false
disabled
boolean
是否禁用
false
block
boolean
是否为块级元素
false

onClickAction 属性说明

onClickAction 用于配置点击 Button 时触发的行为,包括事件类型、数据内容及是否支持多次点击,更多 Action 配置说明详见 Widget Action 使用说明
字段
类型
描述
默认值
type
"sys.chat" | "sys.go_to_url" | "sys.download"
用于定义用户交互后执行的具体行为类型。
-
payload
object
提供指定 Action 类型所需的数据内容。
-
alwaysEnabled
boolean
是否允许按钮多次点击操作,未配置时默认为单次点击。
false
alwaysEnabled字段配置说明:
默认为false,此时 Button 仅支持单次点击操作,点击一次后自动禁用。
配置为true,此时 Button 支持多次点击操作,即使所在的 Widget 不是最新消息,也支持多次点击。
注意:
alwaysEnabled字段配置为true适用于下载(sys.download)、跳转(sys.go_to_url)等可重复执行的操作,不建议用于sys.chat类型的 Action,以避免重复触发对话请求。
Template 示例:
在该 Template 中,由于alwaysEnabled字段配置为true,下载图片 Button 支持多次点击。
<Button
label="下载图片"
onClickAction={{
type: 'sys.download',
alwaysEnabled: true,
payload: {
url: 'https://cdn.xiaowei.qq.com/static/adp/app-default-avatar.png',
},
}}
style="primary"
block
/>