• Demo
• Usage
• Fields
  • isDisabled
  • isLoading
  • leftIcon
  • rightIcon
  • size
  • text
• Events
  • click

Demo

View:

<ma-button
    text="Add">
</ma-button>

Determines whether the component is disabled.

Boolean

false

Sets the field:

View:

<ma-button
    is-disabled="true">
</ma-button>

Determines whether the overlay indicating loading process should be displayed over the component.

Boolean

false

Sets the field:

View:

<ma-button
    is-loading="true">
</ma-button>

Font Awesome name for the left icon.

String

''

Sets the field:

View:

<ma-button
    left-icon="plus">
</ma-button>

Font Awesome name for the right icon.

String

''

Sets the field:

View:

<ma-button
    right-icon="plus">
</ma-button>

Size of the component.
Supported sizes: 'xs', 'md'.

String

'md'

Sets the field:

View:

<ma-button
    size="xs">
</ma-button>

Text to be displayed.

String

''

Sets the field:

View:

<ma-button
    text="Add">
</ma-button>

Fires when the component is clicked.

Subscribes to the event:

View:

<ma-button
    click="click()">
</ma-button>

Controller:

$scope.click = function() {
    // Handle the event.
};