ant-design/components/button/index.en-US.md

category	title	description	cover	coverDark	demo	group
Components	Button	To trigger an operation.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original	cols 2	title order General 1

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: 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: when actions are not available.
• loading: add loading spinner in button, avoiding multiple submits too.

Examples

Type Icon Icon Position Debug Icon Debug Block Size Disabled Loading Multiple Buttons Ghost Button Danger Buttons Block Button Deprecated Button Group Loading style bug Component Token Gradient Button

API

Common props ref：Common props

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
classNames	Semantic DOM class	Record<SemanticDOM, string>	-	5.4.0
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	-
iconPosition	Set the icon position of button	start | end	start	5.17.0
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
styles	Semantic DOM style	Record<SemanticDOM, CSSProperties>	-	5.4.0
target	Same as target attribute of a, works when href is specified	string	-
type	Set button type	primary | dashed | link | text | default	default
onClick	Set the handler to handle click event	(event: MouseEvent) => void	-

It accepts all props which native buttons support.

Semantic DOM

Design Token

FAQ

How to close the click wave effect?

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

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

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.

<ConfigProvider autoInsertSpaceInButton={false}>
  <Button>按钮</Button>
</ConfigProvider>