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