NG-ZORROButton
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 4 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.
import { NzButtonModule } from 'ng-zorro-antd/button';Examples
There are primary button, default button, dashed button, text button and link button in antd.
Loading...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...A loading indicator can be added to a button by setting the nzLoading property on the nz-button.
Loading...Basic
With Icon
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.
Loading...nzBlock property will make the button fit to its parent width.
Loading...nz-button components can contain an icon. Just placing an icon within the nz-button
Loading...To mark a button as disabled, add the disabled property to the Button.
Loading...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...nzGhost property will make button's background transparent, it is common used in colored background.
Loading...You can use nzDanger to mark button as danger status.
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.
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[disabled] | prevents a user from interacting with the button | boolean | false | |
[nzGhost] | make background transparent and invert text and border colors | boolean | false | |
[nzLoading] | set the loading status of button | boolean | false | |
[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 width | boolean | false | |
[nzDanger] | set the danger status of button | boolean | false |
nz-button-group#
| Property | Description | Type | Default | Global Config |
|---|---|---|---|---|
[nzSize] | can be set to smalllarge or omitted | 'large'|'small'|'default' | 'default' | - |