> For the complete documentation index, see [llms.txt](https://bryan-guner.gitbook.io/my-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bryan-guner.gitbook.io/my-docs/lambda-labs/ux/untitled/ant-design/ant-components/buttons.md).
# Buttons
## Button
To trigger an operation.
### When To Use[#](https://ant.design/components/button/#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
Primary ButtonDefault ButtonDashed Button\
Text ButtonLink Button[Type](https://ant.design/components/button/#components-button-demo-basic)
### API[#](https://ant.design/components/button/#API)
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | 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[#](https://ant.design/components/button/#FAQ)
#### How to remove space between 2 chinese characters?[#](https://ant.design/components/button/#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](https://ant.design/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://bryan-guner.gitbook.io/my-docs/lambda-labs/ux/untitled/ant-design/ant-components/buttons.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.