These components wrap various kinds of buttons in order to hide the concerns of styling and display.
<rl-button action="" right-aligned="" size="" type="" ng-disabled=""> ... </rl-button>
The expression in the action will be triggered when the button is clicked.
Available in button, buttonAsync, and longClickButton
This will set the size of the button. We use the following sizes: xs, sm, md, lg. This option is applied to the button's class attribute and prefixed with btn-.
Example: size="lg" will ouput class="btn-lg".
Available in button, buttonAsync, buttonLink, buttonSubmit, andbuttonToggle.
This option sets the button's visual type. This option defaults to default. We use the following types: primary, success, danger, info, warning, link. This option is applied to the button's class attribute and prefixed with btn-.
Example: type="danger" will output class="btn-danger".
Available in all buttons.
This option will set disabled on the button if the expression inside it is truthy.
Example: ng-disabled="true" will output <button disabled> ... </button>
Available in all buttons
For buttons that have the ability to show a spinner, specifies whether the spinner should show up on the left or right side of the button. In this context, a right-aligned button will have the spinner on the left, and visa versa. (It's preferrable to avoid having the text jump when the spinner appears)
Available in buttonAsync, buttonSubmit, and longClickButton
A button with an action, size, type, and disabling.
<rl-button action="button.click()" size="lg" type="danger" ng-disabled="true"> ... </rl-button>
Output:
<button type="button" class="btn btn-lg btn-danger" ng-click="button.click()" disabled> ... </button>