Button 按钮

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

按钮用于开始一个即时操作。

Guide

何时使用

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

API

Button

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

Button.Group

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

ARIA and KeyBoard

按键说明
Enter触发onClick事件
SPACE触发onClick事件

代码示例

按钮类型

按钮有三种视觉层次：主按钮、次按钮、普通按钮。不同的类型可以用来区别按钮的重要程度。

Button 按钮 - 图1

查看源码在线预览

  1. import { Button } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button type="normal">Normal</Button> &nbsp;&nbsp;
  5.     <Button type="primary">Prirmary</Button> &nbsp;&nbsp;
  6.     <Button type="secondary">Secondary</Button>
  7.     <br /><br />
  8.     <Button type="normal" text>Normal</Button> &nbsp;&nbsp;
  9.     <Button type="primary" text>Primary</Button> &nbsp;&nbsp;
  10.     <Button type="secondary" text>Secondary</Button>
  11.     <br /><br />
  12.     <Button type="normal" warning>Normal</Button> &nbsp;&nbsp;
  13.     <Button type="primary" warning>Primary</Button> &nbsp;&nbsp;
  14. </div>, mountNode);

按钮尺寸

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

Button 按钮 - 图2

查看源码在线预览

  1. import { Button, Icon } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button type="primary" size="large"><Icon type="atm" />Large</Button>&nbsp;&nbsp;
  5.     <Button type="primary"><Icon type="atm" />Medium</Button>&nbsp;&nbsp;
  6.     <Button type="primary" size="small"><Icon type="atm" />Small</Button>
  7.     <br />
  8.     <br />
  9.     <Button.Group size="large">
  10.         <Button>Button</Button>
  11.         <Button>Button</Button>
  12.         <Button>Button</Button>
  13.     </Button.Group>
  14. </div>, mountNode);

图标按钮

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

Button 按钮 - 图3

查看源码在线预览

  1. import { Button, Icon } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button><Icon type="atm" /> ATM</Button> &nbsp;&nbsp;
  5.     <Button text><Icon type="atm" /> ATM</Button> &nbsp;&nbsp;
  6.     <Button warning><Icon type="atm" /> ATM</Button> &nbsp;&nbsp;
  7.     <Button iconSize="xxs"><Icon type="arrow-left" /> ARROW</Button> &nbsp;&nbsp;
  8. </div>, mountNode);

加载中

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

Button 按钮 - 图4

查看源码在线预览

  1. import { Button } from '@alifd/next';
  3. class Demo extends React.Component {
  4.     constructor(props, context) {
  5.         super(props, context);
  7.         this.state = {
  8.             loading: false
  9.         };
  10.     }
  12.     setLoading = () => {
  13.         this.setState({ loading: true });
  14.     }
  16.     render() {
  17.         return (<div>
  18.             <Button type="secondary" loading>Loading</Button>&nbsp;&nbsp;
  19.             <Button type="primary" loading={this.state.loading} onClick={this.setLoading}>Click to loading</Button>
  20.         </div>);
  21.     }
  22. }
  24. ReactDOM.render(<Demo/>, mountNode);

幽灵按钮

幽灵按钮通常用在有色背景下，可以使用 ghost 属性开启，此时 Button 为透明背景。对于浅色背景和深色背景，通过取值 light, dark 可以配置使用幽灵按钮的场景。

Button 按钮 - 图5

查看源码在线预览

  1. import { Button } from '@alifd/next';
  3. ReactDOM.render(<div style={{ clear: 'both' }}>
  4.     <div className="ghost-light-background">
  5.         <Button ghost="light">Ghost light</Button>
  6.     </div>
  7.     <div className="ghost-dark-background">
  8.         <Button ghost="dark">Ghost dark</Button>
  9.     </div>
  10. </div>, mountNode);
  1. .ghost-light-background {
  2.     display: inline-block;
  3.     height: 100px;
  4.     line-height: 100px;
  5.     width: 50%;
  6.     background: #EBECF0;
  7.     margin-bottom: 20px;
  8.     padding-left:10px;
  9.     box-sizing: border-box;
  10. }
  11. .ghost-dark-background {
  12.     display: inline-block;
  13.     height: 100px;
  14.     line-height: 100px;
  15.     width: 50%;
  16.     background: #333;
  17.     margin-bottom: 20px;
  18.     padding-left:10px;
  19.     box-sizing: border-box;
  20. }

不可用状态

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

Button 按钮 - 图6

查看源码在线预览

  1. import { Button } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button type="primary">Primary</Button>&nbsp;&nbsp;
  5.     <Button component="a" type="primary" disabled>Primary</Button>
  6.     <br />
  7.     <br />
  8.     <Button type="secondary">Secondary</Button>&nbsp;&nbsp;
  9.     <Button type="secondary" disabled>Secondary</Button>
  10.     <br />
  11.     <br />
  12.     <Button type="normal">Normal</Button>&nbsp;&nbsp;
  13.     <Button type="normal" disabled>Normal</Button>
  14.     <br />
  15.     <br />
  16.     <div>
  17.         <div className="ghost-light-background">
  18.             <Button ghost="light" disabled>Ghost Light</Button>
  19.         </div>
  20.         <div className="ghost-dark-background">
  21.             <Button ghost="dark" disabled>Ghost Dark</Button>
  22.         </div>
  23.     </div>
  24. </div>, mountNode);
  1. .ghost-light-background {
  2.     display: inline-block;
  3.     height: 100px;
  4.     line-height: 100px;
  5.     width: 50%;
  6.     background: #EBECF0;
  7.     margin-bottom: 20px;
  8.     padding-left:10px;
  9.     box-sizing: border-box;
  10. }
  11. .ghost-dark-background {
  12.     display: inline-block;
  13.     height: 100px;
  14.     line-height: 100px;
  15.     width: 50%;
  16.     background: #333;
  17.     margin-bottom: 20px;
  18.     padding-left:10px;
  19.     box-sizing: border-box;
  20. }

自定义标签类型

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

Button 按钮 - 图7

查看源码在线预览

  1. import { Button } from '@alifd/next';
  3. const props = {
  4.     component: 'a',
  5.     href: 'http://www.alibaba.com',
  6.     target: '_blank'
  7. };
  9. ReactDOM.render(<div>
  10.     <Button {...props} type="primary">alibaba.com</Button> &nbsp;&nbsp;
  11.     <Button {...props} type="secondary">alibaba.com</Button> &nbsp;&nbsp;
  12.     <Button {...props} type="normal">alibaba.com</Button>
  13. </div>, mountNode);

按钮组

Button.Group 子组件用于将多个按钮组合在一个容器中。

Button 按钮 - 图8

查看源码在线预览

  1. import { Button, Icon } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button.Group>
  5.         <Button type="primary">OK</Button>
  6.         <Button type="secondary">Cancel</Button>
  7.     </Button.Group>
  8.     &nbsp;&nbsp;
  9.     <Button.Group>
  10.         <Button disabled>Left</Button>
  11.         <Button disabled>Middle</Button>
  12.         <Button disabled>Right</Button>
  13.     </Button.Group>
  14.     <br />
  15.     <br />
  17.     <Button.Group>
  18.         <Button type="primary"><Icon type="arrow-left" /> Backward</Button>
  19.         <Button type="primary">Forward <Icon type="arrow-right" /></Button>
  20.     </Button.Group>
  21.     &nbsp;&nbsp;
  22.     <Button.Group>
  23.         <Button type="primary"><Icon type="prompt" /></Button>
  24.         <Button type="primary"><Icon type="clock" /></Button>
  25.         <Button type="primary"><Icon type="set" /></Button>
  26.     </Button.Group>
  27. </div>, mountNode);

无障碍

在使用不包含文本的icon Button组件时，我们需要添加aria-label对其进行描述，键盘操作请参考ARIA and KeyBoard。

Button 按钮 - 图9

查看源码在线预览

  1. import { Button, Icon } from '@alifd/next';
  3. ReactDOM.render(<div>
  4.     <Button.Group>
  5.         <Button type="primary" aria-label="prompt button"><Icon type="prompt" /></Button>
  6.         <Button type="primary" aria-label="clock button"><Icon type="clock" /></Button>
  7.         <Button type="primary" aria-label="set button"><Icon type="set" /></Button>
  8.     </Button.Group>
  9. </div>, mountNode);

相关区块

Button 按钮 - 图10

暂无相关区块