Buttons

Examples

<Bs::Button @color="primary" {{on "click" this.go}}>Primary</Bs::Button>
<Bs::Button @color="secondary" {{on "click" this.go}}>Secondary</Bs::Button>
<Bs::Button @color="success" {{on "click" this.go}}>Success</Bs::Button>
<Bs::Button @color="danger" {{on "click" this.go}}>Danger</Bs::Button>
<Bs::Button @color="warning" {{on "click" this.go}}>Warning</Bs::Button>
<Bs::Button @color="info" {{on "click" this.go}}>Info</Bs::Button>
<Bs::Button @color="light" {{on "click" this.go}}>Light</Bs::Button>
<Bs::Button @color="dark" {{on "click" this.go}}>Dark</Bs::Button>

Outline buttons

<Bs::Button
  @outline={{true}}
  @color="primary"
  {{on "click" this.go}}
>Primary</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="secondary"
  {{on "click" this.go}}
>Secondary</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="success"
  {{on "click" this.go}}
>Success</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="danger"
  {{on "click" this.go}}
>Danger</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="warning"
  {{on "click" this.go}}
>Warning</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="info"
  {{on "click" this.go}}
>Info</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="light"
  {{on "click" this.go}}
>Light</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="dark"
  {{on "click" this.go}}
>Dark</Bs::Button>

Sizes

<Bs::Button @size="lg" @color="primary" {{on "click" this.go}}>
  Large button
</Bs::Button>
<Bs::Button @size="lg" @color="secondary" {{on "click" this.go}}>
  Large button
</Bs::Button>
<Bs::Button @size="sm" @color="primary" {{on "click" this.go}}>
  Small button
</Bs::Button>
<Bs::Button @size="sm" @color="secondary" {{on "click" this.go}}>
  Small button
</Bs::Button>

Disabled state

<Bs::Button @color="primary" @disabled={{true}} {{on "click" this.go}}>
  Primary button
</Bs::Button>
<Bs::Button @color="secondary" @disabled={{true}} {{on "click" this.go}}>
  Button
</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="primary"
  @disabled={{true}}
  {{on "click" this.go}}
>
  Primary button
</Bs::Button>
<Bs::Button
  @outline={{true}}
  @color="secondary"
  @disabled={{true}}
  {{on "click" this.go}}
>
  Button
</Bs::Button>