Button按钮

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

何时使用

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

代码演示

Button按钮 - 图1

按钮类型

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

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

Button按钮 - 图2

按钮尺寸

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

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

  1. import { Button, Radio, Icon } from 'antd';
  2. class ButtonSize extends React.Component {
  3. state = {
  4. size: 'large',
  5. };
  6. handleSizeChange = e => {
  7. this.setState({ size: e.target.value });
  8. };
  9. render() {
  10. const { size } = this.state;
  11. return (
  12. <div>
  13. <Radio.Group value={size} onChange={this.handleSizeChange}>
  14. <Radio.Button value="large">Large</Radio.Button>
  15. <Radio.Button value="default">Default</Radio.Button>
  16. <Radio.Button value="small">Small</Radio.Button>
  17. </Radio.Group>
  18. <br />
  19. <br />
  20. <Button type="primary" size={size}>
  21. Primary
  22. </Button>
  23. <Button size={size}>Normal</Button>
  24. <Button type="dashed" size={size}>
  25. Dashed
  26. </Button>
  27. <Button type="danger" size={size}>
  28. Danger
  29. </Button>
  30. <Button type="link" size={size}>
  31. Link
  32. </Button>
  33. <br />
  34. <Button type="primary" icon="download" size={size} />
  35. <Button type="primary" shape="circle" icon="download" size={size} />
  36. <Button type="primary" shape="round" icon="download" size={size} />
  37. <Button type="primary" shape="round" icon="download" size={size}>
  38. Download
  39. </Button>
  40. <Button type="primary" icon="download" size={size}>
  41. Download
  42. </Button>
  43. <br />
  44. <Button.Group size={size}>
  45. <Button type="primary">
  46. <Icon type="left" />
  47. Backward
  48. </Button>
  49. <Button type="primary">
  50. Forward
  51. <Icon type="right" />
  52. </Button>
  53. </Button.Group>
  54. </div>
  55. );
  56. }
  57. }
  58. ReactDOM.render(<ButtonSize />, mountNode);

Button按钮 - 图3

加载中状态

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

  1. import { Button } from 'antd';
  2. class App extends React.Component {
  3. state = {
  4. loading: false,
  5. iconLoading: false,
  6. };
  7. enterLoading = () => {
  8. this.setState({ loading: true });
  9. };
  10. enterIconLoading = () => {
  11. this.setState({ iconLoading: true });
  12. };
  13. render() {
  14. return (
  15. <div>
  16. <Button type="primary" loading>
  17. Loading
  18. </Button>
  19. <Button type="primary" size="small" loading>
  20. Loading
  21. </Button>
  22. <br />
  23. <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
  24. Click me!
  25. </Button>
  26. <Button
  27. type="primary"
  28. icon="poweroff"
  29. loading={this.state.iconLoading}
  30. onClick={this.enterIconLoading}
  31. >
  32. Click me!
  33. </Button>
  34. <br />
  35. <Button type="primary" loading />
  36. <Button type="primary" shape="circle" loading />
  37. <Button type="danger" shape="round" loading />
  38. </div>
  39. );
  40. }
  41. }
  42. ReactDOM.render(<App />, mountNode);

Button按钮 - 图4

按钮组合

可以将多个 Button 放入 Button.Group 的容器中。

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

  1. import { Button, Icon } from 'antd';
  2. const ButtonGroup = Button.Group;
  3. ReactDOM.render(
  4. <div>
  5. <h4>Basic</h4>
  6. <ButtonGroup>
  7. <Button>Cancel</Button>
  8. <Button>OK</Button>
  9. </ButtonGroup>
  10. <ButtonGroup>
  11. <Button disabled>L</Button>
  12. <Button disabled>M</Button>
  13. <Button disabled>R</Button>
  14. </ButtonGroup>
  15. <ButtonGroup>
  16. <Button>L</Button>
  17. <Button>M</Button>
  18. <Button>R</Button>
  19. </ButtonGroup>
  20. <h4>With Icon</h4>
  21. <ButtonGroup>
  22. <Button type="primary">
  23. <Icon type="left" />
  24. Go back
  25. </Button>
  26. <Button type="primary">
  27. Go forward
  28. <Icon type="right" />
  29. </Button>
  30. </ButtonGroup>
  31. <ButtonGroup>
  32. <Button type="primary" icon="cloud" />
  33. <Button type="primary" icon="cloud-download" />
  34. </ButtonGroup>
  35. <ButtonGroup>
  36. <Button type="primary" size="small" icon="cloud" />
  37. <Button type="primary" size="small" icon="cloud-download" />
  38. </ButtonGroup>
  39. </div>,
  40. mountNode,
  41. );

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="danger" block>
  12. Danger
  13. </Button>
  14. <Button type="link" block>
  15. Link
  16. </Button>
  17. </div>,
  18. mountNode,
  19. );

Button按钮 - 图6

图标按钮

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

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

  1. import { Button } from 'antd';
  2. ReactDOM.render(
  3. <div>
  4. <Button type="primary" shape="circle" icon="search" />
  5. <Button type="primary" shape="circle">
  6. A
  7. </Button>
  8. <Button type="primary" icon="search">
  9. Search
  10. </Button>
  11. <Button shape="circle" icon="search" />
  12. <Button icon="search">Search</Button>
  13. <br />
  14. <Button shape="circle" icon="search" />
  15. <Button icon="search">Search</Button>
  16. <Button type="dashed" shape="circle" icon="search" />
  17. <Button type="dashed" icon="search">
  18. Search
  19. </Button>
  20. </div>,
  21. mountNode,
  22. );

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="link">Link</Button>
  18. <Button type="link" disabled>
  19. Link(disabled)
  20. </Button>
  21. <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
  22. <Button ghost>Ghost</Button>
  23. <Button ghost disabled>
  24. Ghost(disabled)
  25. </Button>
  26. </div>
  27. </div>,
  28. mountNode,
  29. );

Button按钮 - 图8

多个按钮组合

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

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

Button按钮 - 图9

幽灵按钮

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

  1. import { Button } from 'antd';
  2. ReactDOM.render(
  3. <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
  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="danger" ghost>
  12. danger
  13. </Button>
  14. <Button type="link" ghost>
  15. link
  16. </Button>
  17. </div>,
  18. mountNode,
  19. );

API

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

按钮的属性说明如下:

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

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

FAQ

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

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

Button按钮 - 图10