Tui

Button 按钮
用于触发操作的通用按钮组件,支持多种状态、图标与交互样式。为了满足按钮的更直观的样式效果,标准尺寸 medium 使用的是 12px 的字体,与其他组件 medium 的尺寸使用的是 14px 的字体不同。可以通过 --ts-button-font-size: var(--ts-font-size); 设置为标准大小字体。
基础用法
支持多种类型(type)与样式的按钮,包括默认、文本、成功、危险等,用于满足不同语义的交互需求。
示例代码
vue
状态控制
展示按钮的加载中状态和禁用状态,适用于异步请求或不可操作的场景。
示例代码
vue
按钮尺寸
通过 size 属性可设置按钮的尺寸,支持 smallmediumlargex-large 四种预设值。
示例代码
vue
图标与边框
支持状态图标(如 loading、success 等)与插槽自定义 icon,用于更丰富的按钮展示效果;还支持 border 描边样式和 shadow 阴影样式。
示例代码
vue
自定义样式
通过 bgcolorhoverBgborderColorshadow 等属性灵活调整按钮外观和交互状态。
Tips:
颜色属性继承自定义属性变量,可通过修改以下变量来全局调整按钮颜色样式:
bg -> hoverBg -> activeBg
color -> hoverColor -> activeColor
示例代码
vue
属性 Props
属性名
说明
类型
可选值
默认值
版本说明
type
按钮类型
string
primary / success / warning / danger / default / text
primary
disabled
是否禁用
boolean
-
false
loading
是否加载中
boolean
-
false
icon
图标
string
SignInIcon / VerifyingIcon / LoadingIcon / CheckCircleIcon
added 0.5.1
flash
是否闪烁
boolean
-
false
size
按钮尺寸
string
large / medium / small / mini
medium
shadow
是否阴影
boolean
-
false
border
是否边框
boolean
-
true
changed: defalut false -> true
color
按钮文字颜色
string
-
bg
按钮背景色
string
-
hoverBg
按钮背景色(悬浮)
string
-
borderColor
按钮border颜色
string
-
hoverBorderColor
按钮border hover颜色
string
-
added 0.6.10
borderRadius
按钮圆角
string
--ts-radius
added 0.5.0
status
已废弃,请使用 icon 替代
string
deprecated 0.5.1
round
是否圆角
boolean
-
true
deprecated 0.7.0
插槽 Slots
插槽名
说明
版本说明
icon
自定义 icon 插槽, loading 状态下不生效
loading
自定义 loading 图标插槽
基础用法
状态控制
按钮尺寸
图标与边框
自定义样式
属性 Props
插槽 Slots