ant-design/components/button/index.en-US.md
MadCcc 4ecc0d7f95
docs: optimize overview svg (#47203)
* docs: optimize overview svg

* docs: update

* docs: dark
2024-01-29 14:50:36 +08:00

4.5 KiB
Raw Blame History

category title cover coverDark demo group
Components Button 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

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: 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 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 refCommon 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 -
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.

styles and classNames attribute

Property Description Version
icon set iconelement 5.5.0

Design Token

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.

<ConfigProvider autoInsertSpaceInButton={false}>
  <Button>按钮</Button>
</ConfigProvider>
Button with two Chinese characters