Button按钮

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

何时使用

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

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

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

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

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

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

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

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

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

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

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

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

代码演示

Button按钮 - 图1

按钮类型

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

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

Button按钮 - 图2

按钮尺寸

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

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

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

Button按钮 - 图3

加载中状态

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

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

Button按钮 - 图4

幽灵按钮

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

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

Button按钮 - 图6

图标按钮

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

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

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

Button按钮 - 图7

不可用状态

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

  1. import { Button } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Button type="primary">Primary</Button>
  5. <Button type="primary" disabled>
  6. Primary(disabled)
  7. </Button>
  8. <br />
  9. <Button>Default</Button>
  10. <Button disabled>Default(disabled)</Button>
  11. <br />
  12. <Button type="dashed">Dashed</Button>
  13. <Button type="dashed" disabled>
  14. Dashed(disabled)
  15. </Button>
  16. <br />
  17. <Button type="text">Text</Button>
  18. <Button type="text" disabled>
  19. Text(disabled)
  20. </Button>
  21. <br />
  22. <Button type="link">Link</Button>
  23. <Button type="link" disabled>
  24. Link(disabled)
  25. </Button>
  26. <br />
  27. <Button danger>Danger Default</Button>
  28. <Button danger disabled>
  29. Danger Default(disabled)
  30. </Button>
  31. <br />
  32. <Button danger type="text">
  33. Danger Text
  34. </Button>
  35. <Button danger type="text" disabled>
  36. Danger Text(disabled)
  37. </Button>
  38. <br />
  39. <Button type="link" danger>
  40. Danger Link
  41. </Button>
  42. <Button type="link" danger disabled>
  43. Danger Link(disabled)
  44. </Button>
  45. <div className="site-button-ghost-wrapper">
  46. <Button ghost>Ghost</Button>
  47. <Button ghost disabled>
  48. Ghost(disabled)
  49. </Button>
  50. </div>
  51. </div>,
  52. mountNode,
  53. );
  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';
  3. function handleMenuClick(e) {
  4. console.log('click', e);
  5. }
  6. const menu = (
  7. <Menu onClick={handleMenuClick}>
  8. <Menu.Item key="1">1st item</Menu.Item>
  9. <Menu.Item key="2">2nd item</Menu.Item>
  10. <Menu.Item key="3">3rd item</Menu.Item>
  11. </Menu>
  12. );
  13. ReactDOM.render(
  14. <div>
  15. <Button type="primary">primary</Button>
  16. <Button>secondary</Button>
  17. <Dropdown overlay={menu}>
  18. <Button>
  19. Actions <DownOutlined />
  20. </Button>
  21. </Dropdown>
  22. </div>,
  23. mountNode,
  24. );

Button按钮 - 图9

危险按钮

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

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

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设置按钮形状,可选值为 circleround 或者不设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 设计规范要求,我们会在按钮内只有两个汉字时自动添加空格,如果你不需要这个特性,可以设置 ConfigProviderautoInsertSpaceInButtonfalse

移除两个汉字之间的空格

设计指引