Button

Add styling and advanced functionality to your buttons.

This page shows some example usage of the <BsButton> component. For the full documentation please refer to the API Docs. You might also want to consult the official Bootstrap Docs for general information.

Simple example

<BsButton @onClick={{action "submit"}}>Button</BsButton>

Options

Solid buttons

Outlined buttons

<p>Solid buttons</p>
<p>
  <BsButton @type="primary" @onClick={{action "submit"}}>Primary</BsButton>
  <BsButton @type="secondary" @onClick={{action "submit"}}>Secondary</BsButton>
  <BsButton @type="success" @onClick={{action "submit"}}>Success</BsButton>
  <BsButton @type="danger" @onClick={{action "submit"}}>Danger</BsButton>
  <BsButton @type="warning" @onClick={{action "submit"}}>Warning</BsButton>
  <BsButton @type="info" @onClick={{action "submit"}}>Info</BsButton>
  <BsButton @type="light" @onClick={{action "submit"}}>Light</BsButton>
  <BsButton @type="dark" @onClick={{action "submit"}}>Dark</BsButton>
  <BsButton @disabled={{true}} @onClick={{action "submit"}}>Disabled</BsButton>
</p>
<p>Outlined buttons</p>
<p>
  <BsButton @type="primary" @outline={{true}} @onClick={{action "submit"}}>Primary</BsButton>
  <BsButton @type="secondary" @outline={{true}} @onClick={{action "submit"}}>Secondary</BsButton>
  <BsButton @type="success" @outline={{true}} @onClick={{action "submit"}}>Success</BsButton>
  <BsButton @type="danger" @outline={{true}} @onClick={{action "submit"}}>Danger</BsButton>
  <BsButton @type="warning" @outline={{true}} @onClick={{action "submit"}}>Warning</BsButton>
  <BsButton @type="info" @outline={{true}} @onClick={{action "submit"}}>Info</BsButton>
  <BsButton @type="light" @outline={{true}} @onClick={{action "submit"}}>Light</BsButton>
  <BsButton @type="dark" @outline={{true}} @onClick={{action "submit"}}>Dark</BsButton>
  <BsButton @disabled={{true}} @outline={{true}} @onClick={{action "submit"}}>Disabled</BsButton>
</p>
<p>
  <BsButton @block={{true}} @onClick={{action "submit"}}>Block Button</BsButton>
</p>

Promise support

Return a Promise from the onClick action for custom text based on the Promise state.

<BsButton
  @defaultText="Start download"
  @pendingText="Downloading..."
  @resolvedText="Download complete!"
  @onClick={{action "download"}}
 />