Button的size属性支持: "xs", "sm", "md", "lg"; 不支持自定义尺寸
Button的color属性支持: "primary", "secondary", "accent", "info", "success", "warning", "error","neutral"; 不支持自定义颜色
Button的fullWidth属性为true时, 会设置宽度为 100%
Button的link属性为 true 时, 会渲染为link风格的样式. 此时outline和ghost属性将被忽略.
Button的startIcon/endIcon属性可以用来显示自定义的头部/尾部图标
tips: 一旦定义则相应位置的loading将被忽略.
Button的glass属性为 true 时, 会应用毛玻璃效果.
tips: 需要在图像背景下才能体现效果
Button的shape属性支持: "square"(正方形)和"circle"(圆形), 两者都是宽高相等的形状, 对于显示单个字符或者显示图标的按钮非常有用.
color,size,ghost属性都可以运用到这两个形状上
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| color | "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "neutral" | undefined | no | ||
| dash | boolean | undefined | no | 虚框样式 | |
| endIcon | React.ReactNode | no | 右侧图标元素 | |
| fullWidth | boolean | undefined | no | full width, 优先级高于wide | |
| ghost | boolean | undefined | no | 无边框和背景的样式 | |
| glass | boolean | undefined | no | 毛玻璃效果的样式,需要有背景才有效果, 优先级高于 outline, dash, soft | |
| link | boolean | undefined | no | link样式, 优先级高于 glass, ghost, outline, dash, soft | |
| loading | boolean | undefined | no | 是否在左侧显示加载动画图标 | |
| loadingPosition | "left" | "right" | undefined | no | "left" | 加载动画图标的显示位置 |
| noAnimation | boolean | undefined | no | 无点击动画, v5不再有效果 @deprecated | |
| outline | boolean | undefined | no | 边框样式 | |
| shape | "circle" | "square" | undefined | no | 矩形或圆形, 用于单字符或图标 | |
| sharp | "circle" | "square" | undefined | no | 矩形或圆形, 用于单字符或图标 @deprecated 使用shape替代 | |
| size | ThemeBaseSize | undefined | no | 尺寸大小 | |
| soft | boolean | undefined | no | soft样式 | |
| startIcon | React.ReactNode | no | 左侧图标元素 | |
| wide | boolean | undefined | no | 加宽 |