Buttons

Based on Bootstrap button.

Examples


<abp-button> Default </abp-button>
<abp-button button-type="Primary">Primary</abp-button>
<abp-button button-type="Secondary">Secondary</abp-button>
<abp-button button-type="Success">Success</abp-button>
<abp-button button-type="Danger">Danger</abp-button>
<abp-button button-type="Warning">Warning</abp-button>
<abp-button button-type="Info">Info</abp-button>
<abp-button button-type="Light">Light</abp-button>
<abp-button button-type="Dark">Dark</abp-button>

<abp-button button-type="Link">Link</abp-button>

<button type="button" class="btn">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

Button tags

Link

<a abp-button="Primary" href="#">Link</a>
<abp-button button-type="Primary" type="submit" text="Button"/>
<input abp-button="Primary" value="Input" />
<input abp-button="Primary" type="submit" value="Submit" />
<input abp-button="Primary" type="reset" value="Reset" />

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

Outline buttons


<abp-button button-type="Outline_Primary">Primary</abp-button>
<abp-button button-type="Outline_Secondary">Secondary</abp-button>
<abp-button button-type="Outline_Success">Success</abp-button>
<abp-button button-type="Outline_Danger">Danger</abp-button>
<abp-button button-type="Outline_Warning">Warning</abp-button>
<abp-button button-type="Outline_Info">Info</abp-button>
<abp-button button-type="Outline_Light">Light</abp-button>
<abp-button button-type="Outline_Dark">Dark</abp-button>

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Sizes


<abp-button size="Large" button-type="Primary" text="Large button" />
<abp-button size="Large" button-type="Secondary" text="Large button" />

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<abp-button size="Small" button-type="Primary" text="Small button" />
<abp-button size="Small" button-type="Secondary" text="Small button" />

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

Icon


<abp-button icon="pencil" text="With Icon"/>
<abp-button icon-type="FontAwesome" icon="info" text="With Icon"/>

<button class="btn" type="button"><i class="fa fa-pencil"></i> <span>With Icon</span></button>
<button class="btn" type="button"><i class="fa fa-info"></i> <span>With Icon</span></button>
  • icon-type: Formats the icon attribute. Default value is FontAwesome.
  • icon: Sets icon to button.

Busy Text Example


<abp-button text="Busy" busy-text="Saving..."/>

<button class="btn" type="button" data-busy-text="Saving..."><span>Busy</span></button>
  • busy-text: Sets "data-busy-text" attribute. Default value is localization of "ProcessingWithThreeDot" string.
  • busy-text-is-html: Sets "data-busy-is-html" attribute. Default value is "false".