abp-button is the main element to create buttons.

Basic usage:

<abp-button button-type="Primary">Click Me</abp-button>


See the buttons demo page to see it in action.



A value indicates the main style/type of the button. Should be one of the following values:

  • Default (default value)
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
  • Outline_Primary
  • Outline_Secondary
  • Outline_Success
  • Outline_Danger
  • Outline_Warning
  • Outline_Info
  • Outline_Light
  • Outline_Dark
  • Link


A value indicates the size of the button. Should be one of the following values:

  • Default (default value)
  • Small
  • Medium
  • Large
  • Block
  • Block_Small
  • Block_Medium
  • Block_Large


A text that is shown when the button is busy.


The text of the button. This is a shortcut if you simply want to set a text to the button. Example:

<abp-button button-type="Primary" text="Click Me" />

In this case, you can use a self-closing tag to make it shorter.


Used to set an icon for the button. It works with the Font Awesome icon classes by default. Example:

<abp-button icon="address-card" text="Address" />

If you don't want to use font-awesome, you have two options:

  1. Set icon-type to Other and write the CSS class of the font icon you're using.
  2. If you don't use a font icon use the opening and closing tags manually and write any code inside the tags.


Set true to make the button initially disabled.

In this document