Type
Icon
Size
Disabled
Loading
Multiple Buttons
Ghost Button
Danger Buttons
Block Button
API

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

Link Link Link Link Link
Dash Link Large Dash Link Dash Link Dash Link Dash Link

Fugiat tempor magna cupidatat exercitationEt veniam Lorem laborum et occaecat cupidatat commodo Non eiusmod excepteur eiusmod ea consectetur fugiat excepteur quis exercitation. Nostrud magna amet qui qui sint adipisicing. Consequat in anim tempor quis irure. Anim pariatur minim esse mollit irure ex nulla Lorem ut ad quis non dolor anim. Voluptate reprehenderit commodo laboris et reprehenderit aliquip sunt qui sint id. Cillum quis elit nulla dolore reprehenderit minim elit enim velit sint sit dolor.

Type

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

TypeScript
JavaScript
import { Button } from 'antd';
import React from 'react';
import { RemindHintIcon, RemindWarningIcon } from '@gd-uikit/icons';

const App: React.FC = () => (
  <>
    <Button type="primary">
      <RemindWarningIcon />
      Primary
    </Button>
    <Button type="primary" loading>
      Primary
    </Button>
    <Button type="primary" danger>
      Primary
    </Button>
    <Button type="primary" disabled>
      Primary
    </Button>
    <br />
    <Button type="secondary">Secondary</Button>
    <Button type="secondary" loading>
      Secondary
    </Button>
    <Button type="secondary" danger>
      Secondary
    </Button>
    <Button type="secondary" disabled>
      Secondary
    </Button>
    <br />
    <Button icon={<RemindWarningIcon />}>Default</Button>
    <Button loading>Default</Button>
    <Button danger>Default</Button>
    <Button disabled>Default</Button>
    <br />
    <Button type="dashed">Dashed</Button>
    <Button type="dashed" loading>
      Dashed
    </Button>
    <Button type="dashed" danger>
      Dashed
    </Button>
    <Button type="dashed" disabled>
      Dashed
    </Button>
    <br />
    <Button type="text">
      <RemindHintIcon />
      Text
    </Button>
    <Button type="text" loading>
      Text
    </Button>
    <Button type="text" danger>
      Text
    </Button>
    <Button type="text" disabled>
      Text
    </Button>
    <br />
    <Button type="link">Link</Button>
    <Button type="link" size="large">
      Link
    </Button>
    <Button type="link" loading>
      Link
    </Button>
    <Button type="link" danger>
      Link
    </Button>
    <Button type="link" disabled>
      Link
    </Button>
    <br />
    <Button type="dashlink">Dash Link</Button>
    <Button type="dashlink" size="large">
      Large Dash Link
    </Button>
    <Button type="dashlink" loading>
      Dash Link
    </Button>
    <Button type="dashlink" danger>
      Dash Link
    </Button>
    <Button type="dashlink" disabled>
      Dash Link
    </Button>

    <p>
      Fugiat tempor magna cupidatat exercitation
      <Button type="dashlink">
        Et veniam Lorem laborum et occaecat cupidatat commodo Non eiusmod excepteur eiusmod ea
        consectetur fugiat excepteur quis
      </Button> exercitation. Nostrud magna amet qui qui sint adipisicing. Consequat in anim tempor quis
      irure. Anim pariatur minim esse mollit irure ex nulla Lorem ut ad quis non dolor anim. Voluptate
      reprehenderit commodo laboris et reprehenderit aliquip sunt qui sint id. Cillum quis elit nulla
      dolore reprehenderit minim elit enim velit sint sit dolor.
    </p>
  </>
);

export default App;

LargeDefaultSmall

Link

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.

TypeScript
JavaScript
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [size, setSize] = useState<SizeType>('large');

  return (
    <>
      <Radio.Group value={size} onChange={e => setSize(e.target.value)}>
        <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>
    </>
  );
};

export default App;

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

TypeScript
JavaScript
import { PoweroffOutlined } from '@ant-design/icons';
import { Button, Space } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [loadings, setLoadings] = useState<boolean[]>([]);

  const enterLoading = (index: number) => {
    setLoadings(prevLoadings => {
      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
      return newLoadings;
    });

    setTimeout(() => {
      setLoadings(prevLoadings => {
        const newLoadings = [...prevLoadings];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 6000);
  };

  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={() => enterLoading(0)}>
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[1]}
          onClick={() => enterLoading(1)}
        >
          Click me!
        </Button>
        <Button
          type="primary"
          icon={<PoweroffOutlined />}
          loading={loadings[2]}
          onClick={() => enterLoading(2)}
        />
      </Space>
    </>
  );
};

export default App;

Ghost Button

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

TypeScript
JavaScript
import { Button } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <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>
);

export default App;
.site-button-ghost-wrapper {
  padding: 26px 16px 16px;
  background: rgb(190, 200, 200);
}

Link

Block Button

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

TypeScript
JavaScript
import { Button } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <Button type="primary" block>
      Primary
    </Button>
    <Button block>Default</Button>
    <Button type="dashed" block>
      Dashed
    </Button>
    <Button type="link" block>
      Link
    </Button>
  </>
);

export default App;

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.

TypeScript
JavaScript
import { SearchOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import React from 'react';
import { RemindHintIcon, RemindWarningIcon } from '@gd-uikit/icons';

const App: React.FC = () => (
  <>
    <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>
    <Button type="secondary" shape="circle">
      <RemindHintIcon />
    </Button>
    <Button type="secondary">
      <RemindHintIcon />
    </Button>
    <Button type="secondary" icon={<RemindWarningIcon />} />
    <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" />
  </>
);

export default App;

Link Link(disabled)

Danger Link Danger Link(disabled)

Disabled

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

TypeScript
JavaScript
import { Button } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;
.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.

TypeScript
JavaScript
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';
import React from 'react';

const onMenuClick: MenuProps['onClick'] = e => {
  console.log('click', e);
};

const items = [
  {
    key: '1',
    label: '1st item',
  },
  {
    key: '2',
    label: '2nd item',
  },
  {
    key: '3',
    label: '3rd item',
  },
];

const App: React.FC = () => (
  <>
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
  </>
);

export default App;

Link

Danger Buttons

danger is a property of button after antd 4.0.

TypeScript
JavaScript
import { Button } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <>
    <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>
  </>
);

export default App;

API#

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

Property	Description	Type	Default
block	Option to fit button width to its parent width	boolean	false
danger	Set the danger status of button	boolean	false
disabled	Disabled state of button	boolean	false
ghost	Make background transparent and invert text and border colors	boolean	false
href	Redirect url of link button	string	-
htmlType	Set the original html `type` of `button`, see: MDN	string	`button`
icon	Set the icon component of button	ReactNode	-
loading	Set the loading status of button	boolean \| { delay: number }	false
shape	Can be set button shape	`default` \| `circle` \| `round`	'default'
size	Set the size of button	`large` \| `middle` \| `small`	`middle`
target	Same as target attribute of a, works when href is specified	string	-
type	Can be set to `primary` `ghost` `dashed` `link` `text` `default`	string	`default`
onClick	Set 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