logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
Type
Icon
Size
Disabled
Loading
Multiple Buttons
Ghost Button
Danger Buttons
Block Button
API
Design Token
FAQ
How to remove space between 2 chinese characters?

Button

Components OverviewIcon

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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
TypeScript
JavaScript
import React from 'react';
import { Button, Space } from 'antd';

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

export default App;
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
TypeScript
JavaScript
import React, { useState } from 'react';
import { DownloadOutlined } from '@ant-design/icons';
import { Button, Radio, Space, Divider } from 'antd';
import type { SizeType } from 'antd/es/config-provider/SizeContext';

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

  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>
      <Divider orientation="left" plain>
        Preview
      </Divider>
      <Space direction="vertical">
        <Space wrap>
          <Button type="primary" size={size}>
            Primary
          </Button>
          <Button size={size}>Default</Button>
          <Button type="dashed" size={size}>
            Dashed
          </Button>
        </Space>
        <Button type="link" size={size}>
          Link
        </Button>
        <Space wrap>
          <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>
        </Space>
      </Space>
    </>
  );
};

export default App;
Loading

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

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

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 direction="vertical">
      <Space wrap>
        <Button type="primary" loading>
          Loading
        </Button>
        <Button type="primary" size="small" loading>
          Loading
        </Button>
        <Button type="primary" icon={<PoweroffOutlined />} loading />
      </Space>

      <Space wrap>
        <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>
    </Space>
  );
};

export default App;
Ghost Button

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Button, Space } from 'antd';

const App: React.FC = () => (
  <Space className="site-button-ghost-wrapper" wrap>
    <Button type="primary" ghost>
      Primary
    </Button>
    <Button ghost>Default</Button>
    <Button type="dashed" ghost>
      Dashed
    </Button>
    <Button type="primary" danger ghost>
      Danger
    </Button>
  </Space>
);

export default App;
Block Button

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Button, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical" style={{ width: '100%' }}>
    <Button type="primary" block>
      Primary
    </Button>
    <Button block>Default</Button>
    <Button type="dashed" block>
      Dashed
    </Button>
    <Button disabled block>
      disabled
    </Button>
    <Button type="text" block>
      text
    </Button>
    <Button type="link" block>
      Link
    </Button>
  </Space>
);

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.

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

const App: React.FC = () => (
  <Space direction="vertical">
    <Space wrap>
      <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>
    </Space>
    <Space wrap>
      <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" />
    </Space>
  </Space>
);

export default App;
Disabled

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Button, Space } from 'antd';

const App: React.FC = () => (
  <Space direction="vertical">
    <Space>
      <Button type="primary">Primary</Button>
      <Button type="primary" disabled>
        Primary(disabled)
      </Button>
    </Space>
    <Space>
      <Button>Default</Button>
      <Button disabled>Default(disabled)</Button>
    </Space>
    <Space>
      <Button type="dashed">Dashed</Button>
      <Button type="dashed" disabled>
        Dashed(disabled)
      </Button>
    </Space>
    <Space>
      <Button type="text">Text</Button>
      <Button type="text" disabled>
        Text(disabled)
      </Button>
    </Space>
    <Space>
      <Button type="link">Link</Button>
      <Button type="link" disabled>
        Link(disabled)
      </Button>
    </Space>
    <Space>
      <Button type="primary" href='https://ant.design/index-cn'>
        Href Primary
      </Button>
      <Button type="primary" href='https://ant.design/index-cn' disabled>
        Href Primary(disabled)
      </Button>
    </Space>
    <Space>
      <Button danger>Danger Default</Button>
      <Button danger disabled>
        Danger Default(disabled)
      </Button>
    </Space>
    <Space>
      <Button danger type="text">
        Danger Text
      </Button>
      <Button danger type="text" disabled>
        Danger Text(disabled)
      </Button>
    </Space>
    <Space>
      <Button type="link" danger>
        Danger Link
      </Button>
      <Button type="link" danger disabled>
        Danger Link(disabled)
      </Button>
    </Space>
    <Space className="site-button-ghost-wrapper">
      <Button ghost>Ghost</Button>
      <Button ghost disabled>
        Ghost(disabled)
      </Button>
    </Space>
  </Space>
);

export default App;
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
TypeScript
JavaScript
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';

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 = () => (
  <Space direction="vertical">
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>
  </Space>
);

export default App;
Danger Buttons

danger is a property of button after antd 4.0.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Button, Space } from 'antd';

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

export default App;

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
shapeCan be set button shapedefault | circle | rounddefault
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: MouseEvent) => void-

It accepts all props which native buttons support.

Design Token

Global Token

Token NameDescriptionTypeDefault Value
controlTmpOutlineDefault style outline color.stringrgba(0, 0, 0, 0.02)
paddingContentHorizontalControl the horizontal padding of content element.number16
lineWidthBorder width of base componentsnumber1
lineTypeBorder style of base componentsstringsolid
motionDurationMidMotion speed, medium speed. Used for medium element animation interaction.string0.2s
motionEaseInOutPreset motion curve.stringcubic-bezier(0.645, 0.045, 0.355, 1)
lineHeightLine height of text.number1.5714285714285714
colorTextDefault text color which comply with W3C standards, and this color is also the darkest neutral color.stringrgba(0, 0, 0, 0.88)
marginXSControl the margin of an element, with a small size.number8
lineWidthFocusControl the width of the line when the component is in focus state.number4
colorPrimaryBorderThe stroke color under the main color gradient, used on the stroke of components such as Slider.string#91caff
colorPrimaryHoverHover state under the main color gradient.string#4096ff
controlHeightSMSM component heightnumber24
paddingXSControl the extra small padding of the element.number8
borderRadiusSMSM size border radius, used in small size components, such as Button, Input, Select and other input components in small sizenumber4
fontSizeThe most widely used font size in the design system, from which the text gradient will be derived.number14
opacityLoadingControl the opacity of the loading state.number0.65
motionDurationSlowMotion speed, slow speed. Used for large element animation interaction.string0.3s
controlHeightThe height of the basic controls such as buttons and input boxes in Ant Designnumber32
borderRadiusBorder radius of base componentsnumber6
controlHeightLGLG component heightnumber40
fontSizeLGLarge font sizenumber16
borderRadiusLGLG size border radius, used in some large border radius components, such as Card, Modal and other components.number8
colorBorderDefault border color, used to separate different elements, such as: form separator, card separator, etc.string#d9d9d9
colorTextDisabledControl the color of text in disabled state.stringrgba(0, 0, 0, 0.25)
colorBgContainerDisabledControl the background color of container in disabled state.stringrgba(0, 0, 0, 0.04)
colorBgContainerContainer background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.string#ffffff
controlOutlineWidthControl the outline width of input component.number2
colorPrimaryActiveDark active state under the main color gradient.string#0958d9
colorErrorUsed to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.string#ff4d4f
colorErrorHoverThe hover state of the error color.string#ff7875
colorErrorBorderHoverThe hover state border color of the error state.string#ffa39e
colorErrorActiveThe active state of the error color.string#d9363e
colorTextLightSolidControl the highlight color of text with background color, such as the text in Primary Button components.string#fff
colorPrimaryBrand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.string#1677ff
controlOutlineControl the outline color of input component.stringrgba(5, 145, 255, 0.1)
colorErrorOutlineControl the outline color of input component in error state.stringrgba(255, 38, 5, 0.06)
colorLinkControl the color of hyperlink.string#1677ff
colorLinkHoverControl the color of hyperlink when hovering.string#69b1ff
colorLinkActiveControl the color of hyperlink when clicked.string#0958d9
colorBgTextHoverControl the background color of text in hover state.stringrgba(0, 0, 0, 0.06)
colorBgTextActiveControl the background color of text in active state.stringrgba(0, 0, 0, 0.15)
colorErrorBgThe background color of the error state.string#fff2f0

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
Preview
Href Primary
Href Primary(disabled)