Button

Table of contents

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

Demo

Demo

Usage

View:

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

Fields

isDisabled

Determines whether the component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

isLoading

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

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

leftIcon

Font Awesome name for the left icon.

Type

String

Default value

''

Examples

Sets the field:

View:

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

rightIcon

Font Awesome name for the right icon.

Type

String

Default value

''

Examples

Sets the field:

View:

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

size

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

Type

String

Default value

'md'

Examples

Sets the field:

View:

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

text

Text to be displayed.

Type

String

Default value

''

Examples

Sets the field:

View:

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

Events

click

Fires when the component is clicked.

Examples

Subscribes to the event:

View:

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

Controller:

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