Button

To trigger an operation.

When To Use#

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

In Ant Design we provide 5 types of button.

  • Primary button: indicate the main action, one primary button at most in one section.

  • Default button: indicate a series of actions without priority.

  • Dashed button: used for adding action commonly.

  • Text button: used for the most secondary action.

  • Link button: used for external links.

And 4 other properties additionally.

  • danger: used for actions of risk, like deletion or authorization.

  • ghost: used in situations with complex background, home pages usually.

  • disabled: when actions are not available.

  • loading: add loading spinner in button, avoiding multiple submits too.

Examples


Type

There are primary button, default button, dashed button, text button and link button in antd.

expand codeexpand code
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </>,
  mountNode,
);




Size

Ant Design supports a default button size as well as a large and small size.

If a large or small button is desired, set the size property to either large or small respectively. Omit the size property for a button with the default size.

expand codeexpand code
import { Button, Radio } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';

class ButtonSize extends React.Component {
  state = {
    size: 'large',
  };

  handleSizeChange = e => {
    this.setState({ size: e.target.value });
  };

  render() {
    const { size } = this.state;
    return (
      <>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
        <br />
        <br />
        <Button type="primary" size={size}>
          Primary
        </Button>
        <Button size={size}>Default</Button>
        <Button type="dashed" size={size}>
          Dashed
        </Button>
        <br />
        <Button type="link" size={size}>
          Link
        </Button>
        <br />
        <Button type="primary" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />
        <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>
          Download
        </Button>
        <Button type="primary" icon={<DownloadOutlined />} size={size}>
          Download
        </Button>
      </>
    );
  }
}

ReactDOM.render(<ButtonSize />, mountNode);

Loading Text

Loading

A loading indicator can be added to a button by setting the loading property on the Button.

expand codeexpand code
import { Button, Space, Typography, Divider } from 'antd';
import { PoweroffOutlined } from '@ant-design/icons';

const { Title } = Typography;
class App extends React.Component {
  state = {
    loadings: [],
  };

  enterLoading = index => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;

      return {
        loadings: newLoadings,
      };
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;

        return {
          loadings: newLoadings,
        };
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <>
        <Space style={{ width: '100%' }}>
          <Button type="primary" loading>
            Loading
          </Button>
          <Button type="primary" size="small" loading>
            Loading
          </Button>
          <Button type="primary" icon={<PoweroffOutlined />} loading />
        </Space>

        <Space style={{ width: '100%' }}>
          <Button type="primary" loading={loadings[0]} onClick={() => this.enterLoading(0)}>
            Click me!
          </Button>

          <Button
            type="primary"
            icon={<PoweroffOutlined />}
            loading={loadings[1]}
            onClick={() => this.enterLoading(1)}
          >
            Click me!
          </Button>
          <Button
            type="primary"
            icon={<PoweroffOutlined />}
            loading={loadings[2]}
            onClick={() => this.enterLoading(2)}
          />
        </Space>
        <Divider />
        <Title level={4}>Loading Text</Title>
        <Space style={{ width: '100%' }}>
          <Button
            type="primary"
            loadingText
            loading={loadings[3]}
            onClick={() => this.enterLoading(3)}
          >
            Click me!
          </Button>
          <Button
            type="primary"
            loadingText="Custom loading text..."
            loading={loadings[4]}
            onClick={() => this.enterLoading(4)}
          >
            Click me!
          </Button>
        </Space>
      </>
    );
  }
}

ReactDOM.render(<App />, mountNode);
Ghost Button

ghost property will make button's background transparent, it is commonly used in colored background.

expand codeexpand code
import { Button } from 'antd';

ReactDOM.render(
  <div className="site-button-ghost-wrapper">
    <Button type="primary" ghost>
      Primary
    </Button>
    <Button ghost>Default</Button>
    <Button type="dashed" ghost>
      Dashed
    </Button>
    <Button type="primary" danger ghost>
      Danger
    </Button>
  </div>,
  mountNode,
);
.site-button-ghost-wrapper {
  padding: 26px 16px 16px;
  background: rgb(190, 200, 200);
}
Block Button

block property will make the button fit to its parent width.

expand codeexpand code
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary" block>
      Primary
    </Button>
    <Button block>Default</Button>
    <Button type="dashed" block>
      Dashed
    </Button>
    <Button type="link" block>
      Link
    </Button>
  </>,
  mountNode,
);




Icon

Button components can contain an Icon. This is done by setting the icon property or placing an Icon component within the Button.

If you want specific control over the positioning and placement of the Icon, then that should be done by placing the Icon component within the Button rather than using the icon property.

expand codeexpand code
import { Button, Tooltip } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

ReactDOM.render(
  <>
    <Tooltip title="search">
      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button type="primary" shape="circle">
      A
    </Button>
    <Button type="primary" icon={<SearchOutlined />}>
      Search
    </Button>
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button icon={<SearchOutlined />}>Search</Button>
    <br />
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button icon={<SearchOutlined />}>Search</Button>
    <Tooltip title="search">
      <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
    <Button type="dashed" icon={<SearchOutlined />}>
      Search
    </Button>
    <Button icon={<SearchOutlined />} href="https://www.google.com" />
    <br />
    <br />
    <Tooltip title="search">
      <Button type="primary" shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button type="primary" shape="circle" size="large">
      A
    </Button>
    <Button type="primary" icon={<SearchOutlined />} size="large">
      Search
    </Button>
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button icon={<SearchOutlined />} size="large">
      Search
    </Button>
    <br />
    <Tooltip title="search">
      <Button shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button icon={<SearchOutlined />} size="large">
      Search
    </Button>
    <Tooltip title="search">
      <Button type="dashed" shape="circle" icon={<SearchOutlined />} size="large" />
    </Tooltip>
    <Button type="dashed" icon={<SearchOutlined />} size="large">
      Search
    </Button>
    <Button icon={<SearchOutlined />} size="large" href="https://www.google.com" />
  </>,
  mountNode,
);







Disabled

To mark a button as disabled, add the disabled property to the Button.

expand codeexpand code
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary">Primary</Button>
    <Button type="primary" disabled>
      Primary(disabled)
    </Button>
    <br />
    <Button>Default</Button>
    <Button disabled>Default(disabled)</Button>
    <br />
    <Button type="dashed">Dashed</Button>
    <Button type="dashed" disabled>
      Dashed(disabled)
    </Button>
    <br />
    <Button type="text">Text</Button>
    <Button type="text" disabled>
      Text(disabled)
    </Button>
    <br />
    <Button type="link">Link</Button>
    <Button type="link" disabled>
      Link(disabled)
    </Button>
    <br />
    <Button danger>Danger Default</Button>
    <Button danger disabled>
      Danger Default(disabled)
    </Button>
    <br />
    <Button danger type="text">
      Danger Text
    </Button>
    <Button danger type="text" disabled>
      Danger Text(disabled)
    </Button>
    <br />
    <Button type="link" danger>
      Danger Link
    </Button>
    <Button type="link" danger disabled>
      Danger Link(disabled)
    </Button>
    <div className="site-button-ghost-wrapper">
      <Button ghost>Ghost</Button>
      <Button ghost disabled>
        Ghost(disabled)
      </Button>
    </div>
  </>,
  mountNode,
);
.site-button-ghost-wrapper {
  padding: 8px 8px 0 8px;
  background: rgb(190, 200, 200);
}
Multiple Buttons

If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button.

expand codeexpand code
import { Button, Menu, Dropdown } from 'antd';

function handleMenuClick(e) {
  console.log('click', e);
}

const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">1st item</Menu.Item>
    <Menu.Item key="2">2nd item</Menu.Item>
    <Menu.Item key="3">3rd item</Menu.Item>
  </Menu>
);

ReactDOM.render(
  <>
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
  </>,
  mountNode,
);
Danger Buttons

danger is a property of button after antd 4.0.

expand codeexpand code
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary" danger>
      Primary
    </Button>
    <Button danger>Default</Button>
    <Button type="dashed" danger>
      Dashed
    </Button>
    <Button type="text" danger>
      Text
    </Button>
    <Button type="link" danger>
      Link
    </Button>
  </>,
  mountNode,
);

API#

Different button styles can be generated by setting Button properties. The recommended order is: type -> shape -> size -> loading -> disabled.

PropertyDescriptionTypeDefaultVersion
blockOption to fit button width to its parent widthbooleanfalse
dangerSet the danger status of buttonbooleanfalse
disabledDisabled state of buttonbooleanfalse
ghostMake background transparent and invert text and border colorsbooleanfalse
hrefRedirect url of link buttonstring-
htmlTypeSet the original html type of button, see: MDNstringbutton
iconSet the icon component of buttonReactNode-
loadingSet the loading status of buttonboolean | { delay: number }false
loadingTextText when loading state is activeboolean | stringfalse
shapeCan be set button shapedefault | circle | round'default'
sizeSet the size of buttonlarge | middle | smallmiddle
targetSame as target attribute of a, works when href is specifiedstring-
typeCan be set to primary ghost dashed link text defaultstringdefault
onClickSet the handler to handle click event(event) => void-

It accepts all props which native buttons support.

FAQ#

How to remove space between 2 chinese characters?#

Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use ConfigProvider to set autoInsertSpaceInButton as false.

Button with two Chinese characters