Button

To trigger an operation.
Import
Source components/button
Docs Edit this page

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 buttons.

  • 🔵 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 risk actions, like deletion or authorization.
  • 👻 ghost: usually used in situations with a complex background, home pages.
  • 🚫 disabled: when actions are not available.
  • 🔃 loading: add loading spinner in button, avoiding multiple submit.

Examples#

Link Button
Type

There are primary button, default button, dashed button, text button and link button in antd.

      Loading...


Link

Size

Ant Design supports a default button size as well as a large and small size.

If a large or small button is desired, set the nzSize property to either large or small respectively. Omit the nzSize property for a button with the default size.

      Loading...


Loading

A loading indicator can be added to a button by setting the nzLoading property on the nz-button.

      Loading...
Link
Ghost Button

nzGhost property will make button's background transparent, it is common used in colored background.

      Loading...
Link
Danger Buttons

You can use nzDanger to mark button as danger status.

      Loading...

Icon

nz-button components can contain an icon. Just placing an icon within the nz-button

      Loading...



TextText(disabled)
LinkLink(disabled)
Danger TextDanger Text(disabled)
Danger LinkDanger Link(disabled)
Disabled

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

      Loading...
Multiple Buttons

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

      Loading...
Link
Block Button

nzBlock property will make the button fit to its parent width.

      Loading...

API#

[nz-button]#

Note：nz-button is a Directive, it accepts all props which are supported by native button.

To get a customized button, just set nzType/nzShape/nzSize/nzLoading/disabled.

PropertyDescriptionTypeDefaultGlobal Config
[disabled]prevents a user from interacting with the buttonbooleanfalse
[nzGhost]make background transparent and invert text and border colorsbooleanfalse
[nzLoading]set the loading status of buttonbooleanfalse
[nzShape]can be set to circleround or omitted'circle'|'round'-
[nzSize]can be set to smalllarge or omitted'large'|'small'|'default''default'✅
[nzType]can be set to primarydashedtextlink or omitted (meaning default)'primary'|'dashed'|'link'|'text'-
[nzBlock]option to fit button width to its parent widthbooleanfalse
[nzDanger]set the danger status of buttonbooleanfalse