Button 按钮

最近更新时间:2025-12-30 17:25:52

我的收藏

组件功能

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

基础用法

通过 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