Ant Design

⌘ K

6.0.0-alpha.3

Button

To trigger an operation.

Importimport { Button } from "antd";

GitHub

components/button Issue Open issues

Docs

Edit this page Design

contributors

Changelog FloatButton

Ant Design

⌘ K

6.0.0-alpha.3

Button

To trigger an operation.

Importimport { Button } from "antd";

GitHub

components/button Issue Open issues

Docs

Edit this page Design

contributors

Changelog FloatButton

When To Use

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

In Ant Design we provide 5 types of button.

🔵 Primary button: used for the main action, there can be at most one primary button in a section.
⚪️ Default button: used for a series of actions without priority.
😶 Dashed button: commonly used for adding more actions.
🔤 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: used when actions are not available.
🔃 loading: adds a loading spinner in button, avoids multiple submits too.

Examples

API

Common props ref：Common props

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

Property	Description	Type	Default	Version
autoInsertSpace	We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`.	boolean	`true`	5.17.0
block	Option to fit button width to its parent width	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
color	Set button color	`default` \| `primary` \| `danger` \| PresetColors	-	`default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.0
danger	Syntactic sugar. Set the danger status of button. will follow `color` if provided	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	`submit` \| `reset` \| `button`	`button`
icon	Set the icon component of button	ReactNode	-
~~iconPosition~~	Set the icon position of button, please use `iconPlacement` instead	`start` \| `end`	`start`	5.17.0
iconPlacement	Set the icon position of button	`start` \| `end`	`start`	-
loading	Set the loading status of button	boolean \| { delay: number, icon: ReactNode }	false	icon: 5.23.0
shape	Can be used to set button shape	`default` \| `circle` \| `round`	`default`
size	Set the size of button	`large` \| `middle` \| `small`	`middle`
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
target	Same as target attribute of a, works when href is specified	string	-
type	Syntactic sugar. Set button type. Will follow `variant` & `color` if provided	`primary` \| `dashed` \| `link` \| `text` \| `default`	`default`
onClick	Set the handler to handle `click` event	(event: React.MouseEvent<HTMLElement, MouseEvent>) => void	-
variant	Set button variant	`outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link`	-	5.21.0

It accepts all props which native buttons support.

PresetColors

type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
contentFontSize	Font size of button content	number	14
contentFontSizeLG	Font size of large button content	number	16
contentFontSizeSM	Font size of small button content	number	14
contentLineHeight	Line height of button content	number	1.5714285714285714
contentLineHeightLG	Line height of large button content	number	1.5
contentLineHeightSM	Line height of small button content	number	1.5714285714285714
dangerColor	Text color of danger button	string	#fff
dangerShadow	Shadow of danger button	string	0 2px 0 rgba(255,38,5,0.06)
dashedBgDisabled		string	rgba(0,0,0,0.04)
defaultActiveBg	Background color of default button when active	string	#ffffff
defaultActiveBorderColor	Border color of default button when active	string	#0958d9
defaultActiveColor	Text color of default button when active	string	#0958d9
defaultBg	Background color of default button	string	#ffffff
defaultBgDisabled		string	rgba(0,0,0,0.04)
defaultBorderColor	Border color of default button	string	#d9d9d9
defaultColor	Text color of default button	string	rgba(0,0,0,0.88)
defaultGhostBorderColor	Border color of default ghost button	string	#ffffff
defaultGhostColor	Text color of default ghost button	string	#ffffff
defaultHoverBg	Background color of default button when hover	string	#ffffff
defaultHoverBorderColor	Border color of default button	string	#4096ff
defaultHoverColor	Text color of default button when hover	string	#4096ff
defaultShadow	Shadow of default button	string	0 2px 0 rgba(0,0,0,0.02)
fontWeight	Font weight of text	FontWeight \| undefined	400
ghostBg	Background color of ghost button	string	transparent
groupBorderColor	Border color of button group	string	#4096ff
iconGap	Gap between icon and text	Gap<string \| number> \| undefined	8
linkHoverBg	Background color of link button when hover	string	transparent
onlyIconSize	Icon size of button which only contains icon	string \| number	inherit
onlyIconSizeLG	Icon size of large button which only contains icon	string \| number	inherit
onlyIconSizeSM	Icon size of small button which only contains icon	string \| number	inherit
paddingBlock	Vertical padding of button	PaddingBlock<string \| number> \| undefined	4
paddingBlockLG	Vertical padding of large button	PaddingBlock<string \| number> \| undefined	7
paddingBlockSM	Vertical padding of small button	PaddingBlock<string \| number> \| undefined	0
paddingInline	Horizontal padding of button	PaddingInline<string \| number> \| undefined	15
paddingInlineLG	Horizontal padding of large button	PaddingInline<string \| number> \| undefined	15
paddingInlineSM	Horizontal padding of small button	PaddingInline<string \| number> \| undefined	7
primaryColor	Text color of primary button	string	#fff
primaryShadow	Shadow of primary button	string	0 2px 0 rgba(5,145,255,0.1)
solidTextColor	Default text color for solid buttons.	string	#fff
textHoverBg	Background color of text button when hover	string	rgba(0,0,0,0.04)
textTextActiveColor	Default text color for text buttons on active	string	rgba(0,0,0,0.88)
textTextColor	Default text color for text buttons	string	rgba(0,0,0,0.88)
textTextHoverColor	Default text color for text buttons on hover	string	rgba(0,0,0,0.88)

Global TokenHow to use?

FAQ

How to choose type and color & variant?

Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.

jsx

<Button type="primary">click</Button>

Equivalent

jsx

<Button color="primary" variant="solid">
  click
</Button>

How to close the click wave effect?

If you don't need this feature, you can set disabled of wave in ConfigProvider as true.

jsx

<ConfigProvider wave={{ disabled: true }}>
  <Button>click</Button>
</ConfigProvider>

When To Use

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

In Ant Design we provide 5 types of button.

🔵 Primary button: used for the main action, there can be at most one primary button in a section.
⚪️ Default button: used for a series of actions without priority.
😶 Dashed button: commonly used for adding more actions.
🔤 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: used when actions are not available.
🔃 loading: adds a loading spinner in button, avoids multiple submits too.

Examples

Syntactic sugar

Through the type syntactic sugar, use the preset button styles: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.

Icon

You can add an icon using the icon property.

Size

Ant Design supports three sizes of buttons: small, default and large.

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.

Loading

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

Ghost Button

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

Block Button

The block property will make a button fit to its parent width.

Custom disabled backgroundColor

Customize the background color with disable (applicable to type default and dashed)

Color & Variant

You can set the color and variant attributes at the same time can derive more variant buttons.

5.21.0

Icon Placement

You can set the position of a button's icon by setting the iconPlacement to start or end respectively.

5.17.0

Disabled

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

Multiple Buttons

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

Danger Buttons

The danger is a property of buttons after antd 4.0.

Gradient Button

Buttons with a gradient background.

Custom semantic dom styling

You can customize the semantic dom style of Button by passing objects/functions through classNames and styles.

6.0.0

API

Common props ref：Common props

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

Property	Description	Type	Default	Version
autoInsertSpace	We add a space between two Chinese characters by default, which removed by setting `autoInsertSpace` to `false`.	boolean	`true`	5.17.0
block	Option to fit button width to its parent width	boolean	false
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-
color	Set button color	`default` \| `primary` \| `danger` \| PresetColors	-	`default`, `primary` and `danger`: 5.21.0, `PresetColors`: 5.23.0
danger	Syntactic sugar. Set the danger status of button. will follow `color` if provided	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	`submit` \| `reset` \| `button`	`button`
icon	Set the icon component of button	ReactNode	-
~~iconPosition~~	Set the icon position of button, please use `iconPlacement` instead	`start` \| `end`	`start`	5.17.0
iconPlacement	Set the icon position of button	`start` \| `end`	`start`	-
loading	Set the loading status of button	boolean \| { delay: number, icon: ReactNode }	false	icon: 5.23.0
shape	Can be used to set button shape	`default` \| `circle` \| `round`	`default`
size	Set the size of button	`large` \| `middle` \| `small`	`middle`
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-
target	Same as target attribute of a, works when href is specified	string	-
type	Syntactic sugar. Set button type. Will follow `variant` & `color` if provided	`primary` \| `dashed` \| `link` \| `text` \| `default`	`default`
onClick	Set the handler to handle `click` event	(event: React.MouseEvent<HTMLElement, MouseEvent>) => void	-
variant	Set button variant	`outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link`	-	5.21.0

It accepts all props which native buttons support.

PresetColors

type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
contentFontSize	Font size of button content	number	14
contentFontSizeLG	Font size of large button content	number	16
contentFontSizeSM	Font size of small button content	number	14
contentLineHeight	Line height of button content	number	1.5714285714285714
contentLineHeightLG	Line height of large button content	number	1.5
contentLineHeightSM	Line height of small button content	number	1.5714285714285714
dangerColor	Text color of danger button	string	#fff
dangerShadow	Shadow of danger button	string	0 2px 0 rgba(255,38,5,0.06)
dashedBgDisabled		string	rgba(0,0,0,0.04)
defaultActiveBg	Background color of default button when active	string	#ffffff
defaultActiveBorderColor	Border color of default button when active	string	#0958d9
defaultActiveColor	Text color of default button when active	string	#0958d9
defaultBg	Background color of default button	string	#ffffff
defaultBgDisabled		string	rgba(0,0,0,0.04)
defaultBorderColor	Border color of default button	string	#d9d9d9
defaultColor	Text color of default button	string	rgba(0,0,0,0.88)
defaultGhostBorderColor	Border color of default ghost button	string	#ffffff
defaultGhostColor	Text color of default ghost button	string	#ffffff
defaultHoverBg	Background color of default button when hover	string	#ffffff
defaultHoverBorderColor	Border color of default button	string	#4096ff
defaultHoverColor	Text color of default button when hover	string	#4096ff
defaultShadow	Shadow of default button	string	0 2px 0 rgba(0,0,0,0.02)
fontWeight	Font weight of text	FontWeight \| undefined	400
ghostBg	Background color of ghost button	string	transparent
groupBorderColor	Border color of button group	string	#4096ff
iconGap	Gap between icon and text	Gap<string \| number> \| undefined	8
linkHoverBg	Background color of link button when hover	string	transparent
onlyIconSize	Icon size of button which only contains icon	string \| number	inherit
onlyIconSizeLG	Icon size of large button which only contains icon	string \| number	inherit
onlyIconSizeSM	Icon size of small button which only contains icon	string \| number	inherit
paddingBlock	Vertical padding of button	PaddingBlock<string \| number> \| undefined	4
paddingBlockLG	Vertical padding of large button	PaddingBlock<string \| number> \| undefined	7
paddingBlockSM	Vertical padding of small button	PaddingBlock<string \| number> \| undefined	0
paddingInline	Horizontal padding of button	PaddingInline<string \| number> \| undefined	15
paddingInlineLG	Horizontal padding of large button	PaddingInline<string \| number> \| undefined	15
paddingInlineSM	Horizontal padding of small button	PaddingInline<string \| number> \| undefined	7
primaryColor	Text color of primary button	string	#fff
primaryShadow	Shadow of primary button	string	0 2px 0 rgba(5,145,255,0.1)
solidTextColor	Default text color for solid buttons.	string	#fff
textHoverBg	Background color of text button when hover	string	rgba(0,0,0,0.04)
textTextActiveColor	Default text color for text buttons on active	string	rgba(0,0,0,0.88)
textTextColor	Default text color for text buttons	string	rgba(0,0,0,0.88)
textTextHoverColor	Default text color for text buttons on hover	string	rgba(0,0,0,0.88)

Global TokenHow to use?

FAQ

How to choose type and color & variant?

Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.

jsx

<Button type="primary">click</Button>

Equivalent

jsx

<Button color="primary" variant="solid">
  click
</Button>

How to close the click wave effect?

If you don't need this feature, you can set disabled of wave in ConfigProvider as true.

jsx

<ConfigProvider wave={{ disabled: true }}>
  <Button>click</Button>
</ConfigProvider>

Syntactic sugar

Through the type syntactic sugar, use the preset button styles: primary buttons, default buttons, dashed buttons, text buttons, and link buttons.

Icon

You can add an icon using the icon property.

Size

Ant Design supports three sizes of buttons: small, default and large.

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.

Loading

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

Ghost Button

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

Block Button

The block property will make a button fit to its parent width.

Custom disabled backgroundColor

Customize the background color with disable (applicable to type default and dashed)

Color & Variant

You can set the color and variant attributes at the same time can derive more variant buttons.

5.21.0

Icon Placement

You can set the position of a button's icon by setting the iconPlacement to start or end respectively.

5.17.0

Disabled

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

Multiple Buttons

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

Danger Buttons

The danger is a property of buttons after antd 4.0.

Gradient Button

Buttons with a gradient background.

Custom semantic dom styling

You can customize the semantic dom style of Button by passing objects/functions through classNames and styles.

6.0.0

LargeDefaultSmall

Preview

startend

Preview

Href Primary Href Primary(disabled)

root
6.0.0
Root element with comprehensive button styling including border, background, padding, border-radius, box-shadow, transitions, cursor, font-weight, alignment, and layout properties
icon
5.5.0
Icon element with font-size, color inheritance, and SVG style reset for proper icon display
content
6.0.0
Content element that wraps button text with typography styles including nowrap, text-align center, and Chinese character spacing optimization

Button

Button

When To Use

Examples

API

PresetColors

Semantic DOM

Design Token

FAQ

How to choose type and color & variant?

How to close the click wave effect?

When To Use

Examples

API

PresetColors

Semantic DOM

Design Token

FAQ

How to choose type and color & variant?

How to close the click wave effect?

root

icon

content