• Button按钮
    • 何时使用
    • 代码演示
    • API
    • FAQ
      • 如何移除 2 个汉字之间的空格

    Button按钮

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

    何时使用

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

    代码演示

    Button 按钮 - 图1

    按钮类型

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

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

    Button 按钮 - 图2

    按钮尺寸

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

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

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

    Button 按钮 - 图3

    加载中状态

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

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

    Button 按钮 - 图4

    按钮组合

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

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

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

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

    Button 按钮 - 图6

    图标按钮

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

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

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

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

    Button 按钮 - 图8

    多个按钮组合

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

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

    Button 按钮 - 图9

    幽灵按钮

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

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

    API

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

    按钮的属性说明如下：

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

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

    <Button>Hello world!</Button> 最终会被渲染为 <button><span>Hello world!</span></button>，并且除了上表中的属性，其它属性都会直接传到原生 button 上。

    <Button href="http://example.com">Hello world!</Button> 则会渲染为 <a href="http://example.com"><span>Hello world!</span></a>。

    FAQ

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

    设置 ConfigProvider 的 autoInsertSpaceInButton 为 false。