Components.Button public

Implements a HTML button element, with support for all Bootstrap button CSS styles as well as advanced functionality such as button states.

Basic Usage

<BsButton @type="primary" @icon="glyphicon glyphicon-download">
  Downloads
</BsButton>

Actions

Use the onClick property of the component to send an action to your controller. It will receive the button's value (see the value property) as an argument.

<BsButton @type="primary" @icon="glyphicon glyphicon-download" @onClick=(action "download")>
  Downloads
</BsButton>

Promise support for automatic state change

When returning a Promise for any asynchronous operation from the onClick closure action the button will manage an internal state ("default" > "pending" > "fulfilled"/"rejected") automatically.

The button is disabled by default if it's in pending state. You could override this behavior by passing the disabled HTML attribute or by setting @preventConcurrency to false.

<BsButton
  disabled={{false}}
/>
<BsButton
  @preventConcurrency={{false}}
/>

The label could be changed automatically according to the state of the promise with @defaultText, @pendingText, @fulfilledText and @rejectedText arguments:

<BsButton
  @type="primary"
  @icon="glyphicon glyphicon-download"
  @defaultText="Download"
  @pendingText="Loading..."
  @fulfilledText="Completed!"
  @rejectedText="Oups!?"
  @onClick={{this.download}}
/>
// controller.js
import { Controller } from '@ember/controller';
import { action } from '@ember/object';

export default class MyController extends Controller {
  @action
  download(value) {
    return new Promise(...);
  }
});

For further customization isPending, isFulfilled, isRejected and isSettled properties are yielded:

<BsButton @onClick=(action "download") as |button|>
  Download
  {{#if button.isPending}}
    <span class="loading-spinner"></span>
  {{/if}}
</BsButton>

You can reset the state represented by these properties and used for button's text by setting reset property to true.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.

click

private

resetState

private

This will reset the state property to 'default', and with that the button's label to defaultText

_disabled ?boolean private

Default: null

Defined in addon/components/bs-button.js:156

Property to disable the button only used in internal communication between Ember Boostrap components.

active boolean public

Default: false

Defined in addon/components/bs-button.js:189

Set the 'active' class to apply active/pressed CSS styling

block boolean public

Default: false

Defined in addon/components/bs-button.js:200

Property for block level buttons

See the Bootstrap docs

bubble boolean public

Default: false

Defined in addon/components/bs-button.js:212

A click event on a button will not bubble up the DOM tree if it has an onClick action handler. Set to true to enable the event to bubble

buttonType String public deprecated

Default: 'button'

Defined in addon/components/bs-button.js:177

Set the type of the button, either 'button' or 'submit'

defaultText string public

Default label of the button. Not need if used as a block component

disabled boolean public

Default: false

Defined in addon/components/bs-button.js:380

Property to create outline buttons (BS4+ only)

fulfilledText string public

Label of the button used if onClick event has returned a Promise which succeeded. Not considered if used as a block component.

icon String public

Class(es) (e.g. glyphicons or font awesome) to use as a button icon This will render a element in front of the button's label

iconActive String public

If button is active and this is set, the icon property will match this property

iconInactive String public

If button is inactive and this is set, the icon property will match this property

isFulfilled Boolean private

Promise returned by onClick event has been succeeded.

isFulfilled Boolean private

Promise returned by onClick event has been succeeded or rejected.

isPending Boolean private

Promise returned by onClick event is pending.

isRejected Boolean private

Promise returned by onClick event has been rejected.

pendingText string public

Label of the button used if onClick event has returned a Promise which is pending. Not considered if used as a block component.

preventConcurrency Boolean public

Default: true

Defined in addon/components/bs-button.js:269

Controls if onClick action is fired concurrently. If true clicking button multiple times will not trigger onClick action if a Promise returned by previous click is not settled yet.

This does not affect event bubbling.

rejectedText string public

Label of the button used if onClick event has returned a Promise which failed. Not considered if used as a block component.

reset boolean public

Set this to true to reset the state. A typical use case is to bind this attribute with ember-data isDirty flag.

The old value is not taken into consideration. Setting a true value to true again will also reset state. In that case it's even to notify the observer system that the property has changed by calling notifyPropertyChange().

size String public

Property for size styling, set to 'lg', 'sm' or 'xs'

Also see the Bootstrap docs

state String private

Default: 'default'

Defined in addon/components/bs-button.js:283

State of the button. The button's label (if not used as a block component) will be set to the <state>Text property. This property will automatically be set when using a click action that supplies the callback with a promise. Possible values are: "default" > "pending" > "fulfilled" / "rejected". It could be reseted by reset property.

type String public

Default: 'secondary'

Defined in addon/components/bs-button.js:367

Property for type styling

For the available types see the Bootstrap docs

value any public

Supply a value that will be associated with this button. This will be send as a parameter of the default action triggered when clicking the button

onClick

public

When clicking the button this action is called with the value of the button (that is the value of the "value" property).

Return a promise object, and the buttons state will automatically set to "pending", "resolved" and/or "rejected". This could be used to automatically set the button's text depending on promise state (defaultText, pendingText, fulfilledText, rejectedText) and for futher customization using the yielded isPending, isFulfilled, isRejected properties.

The click event will not bubble up, unless you set bubble to true.

Event Payload:

  • value
Classes