Button 按钮

通过点击,触发相应的业务逻辑,执行一个(或一组)操作命令。

使用说明

  • 根据需求,定义按钮的功能逻辑,用不同的颜色表达按钮的主次信息,并在文案中明确描述其功能。

  • 结合场景,选择对应尺寸与组合方式,如小尺寸按钮、组合按钮等。

使用规则

  • 带边的-Button

  • 不带边的纯Icon的-Icon Button

  • 不带边的纯文字的或Icon+文字的-text Button

    

按钮类型

设置按钮的 type 属性值为 primary、normal、secondary,从而呈现不同的颜色状态。

Primary 类型: medium 和 large 两种尺寸

  

Primary 类型: default 和 gray 两种配色

  

Secondary 类型: medium 和 large 两种尺寸

  

Secondary 类型: default 和 gray 两种配色

  

Disabeld 禁用状态

自定义图标

图标按钮

单独以图标为按钮

        

包含图标的按钮

Button 可以嵌入 Icon,默认情况下 Icon 尺寸自动跟随 Button 的尺寸。如果用户想要控制 Icon 的大小,可以通过 iconSize 属性进行设置。

    

    

    

        

按钮尺寸

可以通过设置 size 属性控制按钮的尺寸,可选值为 medium small xs,其中默认值为 medium

  

  

危险按钮

设置按钮的 warning 属性值为 true 来表示该按钮操作具有危险性。

加载中

通过设置 loading 属性即可以让按钮处于加载状态。

    

    

不可用状态

添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变。

alibaba.com   alibaba.comalibaba.com   

自定义标签类型

默认情况下 Button 组件使用 <button> 标签来渲染按钮,通过 component 属性可以自定义 Button 的标签类型。 可选值为 buttona

API

通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:type -> shape -> size -> loading -> disabled

参数说明类型默认值
size按钮的尺寸'xs' | 'small' | 'medium'medium
type按钮的类型'primary' | 'secondary' | 'normal'normal
iconSize按钮中 Icon 的尺寸,用于替代 Icon 的默认大小'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'-
htmlType当 component = 'button' 时,设置 button 标签的 type 值'submit' | 'reset' | 'button'button
component设置标签类型'button' | 'a' | 'div' | 'span'button
loading设置按钮的载入状态Booleanfalse
ghost是否为幽灵按钮Boolean | 'light' | 'dark'false
text是否为文本按钮Booleanfalse
warning是否为警告按钮Booleanfalse
disabled是否禁用Booleanfalse
onClick点击按钮的回调Function(e: Object) => void() => {}

Button.Icon

参数说明类型默认值
name图标名字string-
size按钮的尺寸'medium', 'large'medium
htmlType当 component = 'button' 时,设置 button 标签的 type 值'submit' | 'reset' | 'button'button
component设置标签类型'button' | 'a' | 'div' | 'span'button
type按钮的类型'primary', 'secondary', 'normal'normal
color按钮的颜色'default', 'gray'default
disabled是否禁用Booleanfalse
onClick点击按钮的回调Function(e: Object) => void() => {}

Button.Group

参数说明类型默认值
size统一设置 Button 组件的按钮大小'xs' | 'small' | 'medium'medium