To trigger an operation.
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.
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.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;
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;
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;
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;
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;
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;
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;
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;
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;
Different button styles can be generated by setting Button properties. The recommended order is: type
-> shape
-> size
-> loading
-> disabled
.
Property | Description | Type | Default | Version |
---|---|---|---|---|
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: MouseEvent) => void | - |
It accepts all props which native buttons support.
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
.