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.

expand codeexpand code
      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.

expand codeexpand code
      Loading...


Loading

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

expand codeexpand code
      Loading...

Basic

With Icon

Button Group

Buttons can be grouped by placing multiple nz-button components into a nz-button-group.

The nzSize can be set to large, small or left unset resulting in a default size.

Warning: <nz-button-group> is deprecated in v19, please use <nz-space-compact> instead.

expand codeexpand code
      Loading...
Link
Block Button

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

expand codeexpand code
      Loading...

Icon

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

expand codeexpand code
      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.

expand codeexpand code
      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.

expand codeexpand code
      Loading...
Link
Ghost Button

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

expand codeexpand code
      Loading...
Link
Danger Buttons

You can use nzDanger to mark button as danger status.

expand codeexpand code
      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

nz-button-group#

PropertyDescriptionTypeDefaultGlobal Config
[nzSize]can be set to smalllarge or omitted'large'|'small'|'default''default'-