Button按钮

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

何时使用

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

在 Ant Design 中我们提供了四种按钮。

  • 主按钮：用于主行动点，一个操作区域只能有一个主按钮。

  • 默认按钮：用于没有主次之分的一组行动点。

  • 虚线按钮：常用于添加操作。

  • 文本按钮：用于最次级的行动点。

  • 链接按钮：用于作为外链的行动点。

以及四种状态属性与上面配合使用。

  • 危险：删除/移动/修改权限等危险操作，一般需要二次确认。

  • 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。

  • 禁用：行动点不可用的时候，一般需要文案解释。

  • 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。

代码演示

Button按钮 - 图1

按钮类型

按钮有四种类型：主按钮、次按钮、虚线按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

  1. import { Button } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Button type="primary">Primary Button</Button>
  6.     <Button>Default Button</Button>
  7.     <Button type="dashed">Dashed Button</Button>
  8.     <br />
  9.     <Button type="text">Text Button</Button>
  10.     <Button type="link">Link Button</Button>
  11.   </>,
  12.   mountNode,
  13. );

Button按钮 - 图2

按钮尺寸

按钮有大、中、小三种尺寸。

通过设置 size 为 large small 分别把按钮设为大、小尺寸。若不设置 size，则尺寸为中。

  1. import { Button, Radio } from 'antd';
  2. import { DownloadOutlined } from '@ant-design/icons';
  4. class ButtonSize extends React.Component {
  5.   state = {
  6.     size: 'large',
  7.   };
  9.   handleSizeChange = e => {
  10.     this.setState({ size: e.target.value });
  11.   };
  13.   render() {
  14.     const { size } = this.state;
  15.     return (
  16.       <div>
  17.         <Radio.Group value={size} onChange={this.handleSizeChange}>
  18.           <Radio.Button value="large">Large</Radio.Button>
  19.           <Radio.Button value="default">Default</Radio.Button>
  20.           <Radio.Button value="small">Small</Radio.Button>
  21.         </Radio.Group>
  22.         <br />
  23.         <br />
  24.         <Button type="primary" size={size}>
  25.           Primary
  26.         </Button>
  27.         <Button size={size}>Default</Button>
  28.         <Button type="dashed" size={size}>
  29.           Dashed
  30.         </Button>
  31.         <br />
  32.         <Button type="link" size={size}>
  33.           Link
  34.         </Button>
  35.         <br />
  36.         <Button type="primary" icon={<DownloadOutlined />} size={size} />
  37.         <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
  38.         <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
  39.         <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
  40.           Download
  41.         </Button>
  42.         <Button type="primary" icon={<DownloadOutlined />} size={size}>
  43.           Download
  44.         </Button>
  45.       </div>
  46.     );
  47.   }
  48. }
  50. ReactDOM.render(<ButtonSize />, mountNode);

Button按钮 - 图3

加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

  1. import { Button } from 'antd';
  2. import { PoweroffOutlined } from '@ant-design/icons';
  4. class App extends React.Component {
  5.   state = {
  6.     loadings: [],
  7.   };
  9.   enterLoading = index => {
  10.     const newLoadings = [...this.state.loadings];
  11.     newLoadings[index] = true;
  12.     this.setState({
  13.       loadings: newLoadings,
  14.     });
  15.     setTimeout(() => {
  16.       newLoadings[index] = false;
  17.       this.setState({ loadings: newLoadings });
  18.     }, 6000);
  19.   };
  21.   render() {
  22.     const { loadings } = this.state;
  23.     return (
  24.       <>
  25.         <Button type="primary" loading>
  26.           Loading
  27.         </Button>
  28.         <Button type="primary" size="small" loading>
  29.           Loading
  30.         </Button>
  31.         <Button type="primary" icon={<PoweroffOutlined />} loading />
  32.         <br />
  33.         <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
  34.           Click me!
  35.         </Button>
  36.         <Button
  37.           type="primary"
  38.           icon={<PoweroffOutlined />}
  39.           loading={loadings[1]}
  40.           onClick={() => this.enterLoading(1)}
  41.         >
  42.           Click me!
  43.         </Button>
  44.         <Button
  45.           type="primary"
  46.           icon={<PoweroffOutlined />}
  47.           loading={loadings[2]}
  48.           onClick={() => this.enterLoading(2)}
  49.         />
  50.       </>
  51.     );
  52.   }
  53. }
  55. ReactDOM.render(<App />, mountNode);

Button按钮 - 图4

幽灵按钮

幽灵按钮将按钮的内容反色，背景变为透明，常用在有色背景上。

  1. import { Button } from 'antd';
  3. ReactDOM.render(
  4.   <div className="site-button-ghost-wrapper">
  5.     <Button type="primary" ghost>
  6.       Primary
  7.     </Button>
  8.     <Button ghost>Default</Button>
  9.     <Button type="dashed" ghost>
  10.       Dashed
  11.     </Button>
  12.     <Button type="text" ghost>
  13.       Text
  14.     </Button>
  15.     <Button type="link" ghost>
  16.       Link
  17.     </Button>
  18.   </div>,
  19.   mountNode,
  20. );
  1. .site-button-ghost-wrapper {
  2.   background: rgb(190, 200, 200);
  3.   padding: 26px 16px 16px;
  4. }

Button按钮 - 图5

Block 按钮

block属性将使按钮适合其父宽度。

  1. import { Button } from 'antd';
  3. ReactDOM.render(
  4.   <div>
  5.     <Button type="primary" block>
  6.       Primary
  7.     </Button>
  8.     <Button block>Default</Button>
  9.     <Button type="dashed" block>
  10.       Dashed
  11.     </Button>
  12.     <Button type="link" block>
  13.       Link
  14.     </Button>
  15.   </div>,
  16.   mountNode,
  17. );

Button按钮 - 图6

图标按钮

当需要在 Button 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Button 内使用 Icon 组件。

如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。

  1. import { Button, Tooltip } from 'antd';
  2. import { SearchOutlined } from '@ant-design/icons';
  4. ReactDOM.render(
  5.   <div>
  6.     <Tooltip title="search">
  7.       <Button type="primary" shape="circle" icon={<SearchOutlined />} />
  8.     </Tooltip>
  9.     <Button type="primary" shape="circle">
  10.       A
  11.     </Button>
  12.     <Button type="primary" icon={<SearchOutlined />}>
  13.       Search
  14.     </Button>
  15.     <Tooltip title="search">
  16.       <Button shape="circle" icon={<SearchOutlined />} />
  17.     </Tooltip>
  18.     <Button icon={<SearchOutlined />}>Search</Button>
  19.     <br />
  20.     <Tooltip title="search">
  21.       <Button shape="circle" icon={<SearchOutlined />} />
  22.     </Tooltip>
  23.     <Button icon={<SearchOutlined />}>Search</Button>
  24.     <Tooltip title="search">
  25.       <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
  26.     </Tooltip>
  27.     <Button type="dashed" icon={<SearchOutlined />}>
  28.       Search
  29.     </Button>
  30.   </div>,
  31.   mountNode,
  32. );

Button按钮 - 图7

不可用状态

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

  1. import { Button } from 'antd';
  3. ReactDOM.render(
  4.   <div>
  5.     <Button type="primary">Primary</Button>
  6.     <Button type="primary" disabled>
  7.       Primary(disabled)
  8.     </Button>
  9.     <br />
  10.     <Button>Default</Button>
  11.     <Button disabled>Default(disabled)</Button>
  12.     <br />
  13.     <Button type="dashed">Dashed</Button>
  14.     <Button type="dashed" disabled>
  15.       Dashed(disabled)
  16.     </Button>
  17.     <br />
  18.     <Button type="text">Text</Button>
  19.     <Button type="text" disabled>
  20.       Text(disabled)
  21.     </Button>
  22.     <br />
  23.     <Button type="link">Link</Button>
  24.     <Button type="link" disabled>
  25.       Link(disabled)
  26.     </Button>
  27.     <br />
  28.     <Button danger>Danger Default</Button>
  29.     <Button danger disabled>
  30.       Danger Default(disabled)
  31.     </Button>
  32.     <br />
  33.     <Button danger type="text">
  34.       Danger Text
  35.     </Button>
  36.     <Button danger type="text" disabled>
  37.       Danger Text(disabled)
  38.     </Button>
  39.     <br />
  40.     <Button type="link" danger>
  41.       Danger Link
  42.     </Button>
  43.     <Button type="link" danger disabled>
  44.       Danger Link(disabled)
  45.     </Button>
  46.     <div className="site-button-ghost-wrapper">
  47.       <Button ghost>Ghost</Button>
  48.       <Button ghost disabled>
  49.         Ghost(disabled)
  50.       </Button>
  51.     </div>
  52.   </div>,
  53.   mountNode,
  54. );
  1. .site-button-ghost-wrapper {
  2.   padding: 8px 8px 0 8px;
  3.   background: rgb(190, 200, 200);
  4. }

Button按钮 - 图8

多个按钮组合

按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

  1. import { Button, Menu, Dropdown } from 'antd';
  2. import { DownOutlined } from '@ant-design/icons';
  4. function handleMenuClick(e) {
  5.   console.log('click', e);
  6. }
  8. const menu = (
  9.   <Menu onClick={handleMenuClick}>
  10.     <Menu.Item key="1">1st item</Menu.Item>
  11.     <Menu.Item key="2">2nd item</Menu.Item>
  12.     <Menu.Item key="3">3rd item</Menu.Item>
  13.   </Menu>
  14. );
  16. ReactDOM.render(
  17.   <div>
  18.     <Button type="primary">primary</Button>
  19.     <Button>secondary</Button>
  20.     <Dropdown overlay={menu}>
  21.       <Button>
  22.         Actions <DownOutlined />
  23.       </Button>
  24.     </Dropdown>
  25.   </div>,
  26.   mountNode,
  27. );

Button按钮 - 图9

危险按钮

在 4.0 之后，危险成为一种按钮属性而不是按钮类型。

  1. import { Button } from 'antd';
  3. ReactDOM.render(
  4.   <>
  5.     <Button type="primary" danger>
  6.       Primary
  7.     </Button>
  8.     <Button danger>Default</Button>
  9.     <Button type="dashed" danger>
  10.       Dashed
  11.     </Button>
  12.     <Button type="text" danger>
  13.       Text
  14.     </Button>
  15.     <Button type="link" danger>
  16.       Link
  17.     </Button>
  18.   </>,
  19.   mountNode,
  20. );

API

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

按钮的属性说明如下：

属性说明类型默认值版本
disabled按钮失效状态booleanfalse
ghost幽灵属性，使按钮背景透明booleanfalse
href点击跳转的地址，指定此属性 button 的行为和 a 链接一致string-
htmlType设置 button 原生的 type 值，可选值请参考 HTML 标准stringbutton
icon设置按钮的图标组件ReactNode-
loading设置按钮载入状态boolean | { delay: number }false
shape设置按钮形状，可选值为 circle、 round 或者不设string-
size设置按钮大小large | middle | small无
target相当于 a 链接的 target 属性，href 存在时生效string-
type设置按钮类型primary | ghost | dashed | danger | link | text-
onClick点击按钮时的回调(event) => void-
block将按钮宽度调整为其父宽度的选项booleanfalse
danger设置危险按钮booleanfalse

支持原生 button 的其他所有属性。

FAQ

如何移除两个汉字之间的空格？

根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。

移除两个汉字之间的空格

设计指引