API通用属性参考:通用属性
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled。
按钮的属性说明如下:
属性说明类型默认值版本autoInsertSpace我们默认提供两个汉字之间的空格,可以设置 autoInsertSpace 为 false 关闭booleantrue5.17.0block将按钮宽度调整为其父宽度的选项booleanfalseclassNames用于自定义组件内部各语义化结构的 class,支持对象或函数Record | (info: { props })=> Record-color设置按钮的颜色default | primary | danger | PresetColors-default、primary 和 danger: 5.21.0, PresetColors: 5.23.0danger语法糖,设置危险按钮。当设置 color 时会以后者为准booleanfalsedisabled设置按钮失效状态booleanfalseghost幽灵属性,使按钮背景透明booleanfalsehref点击跳转的地址,指定此属性 button 的行为和 a 链接一致string-htmlType设置 button 原生的 type 值,可选值请参考 HTML 标准submit | reset | buttonbuttonicon设置按钮的图标组件ReactNode-iconPosition设置按钮图标组件的位置,请使用 iconPlacement 替换start | endstart5.17.0iconPlacement设置按钮图标组件的位置start | endstart-loading设置按钮载入状态boolean | { delay: number, icon: ReactNode }falseicon: 5.23.0shape设置按钮形状default | circle | rounddefaultsize设置按钮大小large | middle | smallmiddlestyles用于自定义组件内部各语义化结构的行内 style,支持对象或函数Record | (info: { props })=> Record-target相当于 a 链接的 target 属性,href 存在时生效string-type语法糖,设置按钮类型。当设置 variant 与 color 时以后者为准primary | dashed | link | text | defaultdefaultonClick点击按钮时的回调(event: React.MouseEvent) => void-variant设置按钮的变体outlined | dashed | solid | filled | text | link-5.21.0支持原生 button 的其他所有属性。
PresetColorstype PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
Semantic DOM