Skip to content

Latest commit

 

History

History
86 lines (59 loc) · 1.7 KB

Buttons.md

File metadata and controls

86 lines (59 loc) · 1.7 KB
Raw

Buttons

Introduction

abp-button is the main element to create buttons.

Basic usage:

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

Demo

See the buttons demo page to see it in action.

Attributes

button-type

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

size

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

busy-text

A text that is shown when the button is busy.

text

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.

icon

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" />
icon-type

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.

disabled

Set true to make the button initially disabled.