Button group

Basic example

<Bs::ButtonGroup as |group|>
  <group.button @color="primary" {{on "click" this.go}}>Left</group.button>
  <group.button @color="primary" {{on "click" this.go}}>Middle</group.button>
  <group.button @color="primary" {{on "click" this.go}}>Right</group.button>
</Bs::ButtonGroup>

Mixed styles

<Bs::ButtonGroup as |group|>
  <group.button @color="danger" {{on "click" this.go}}>Left</group.button>
  <group.button @color="warning" {{on "click" this.go}}>Middle</group.button>
  <group.button @color="success" {{on "click" this.go}}>Right</group.button>
</Bs::ButtonGroup>

Outlined styles

<Bs::ButtonGroup as |group|>
  <group.button
    @outline={{true}}
    @color="primary"
    {{on "click" this.go}}
  >Left</group.button>
  <group.button
    @outline={{true}}
    @color="primary"
    {{on "click" this.go}}
  >Middle</group.button>
  <group.button
    @outline={{true}}
    @color="primary"
    {{on "click" this.go}}
  >Right</group.button>
</Bs::ButtonGroup>

Sizing

<Bs::ButtonGroup @size="lg" as |group|>
  <group.button @color="secondary" {{on "click" this.go}}>Left</group.button>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Middle</group.button>
  <group.button @color="secondary" {{on "click" this.go}}>Right</group.button>
</Bs::ButtonGroup>

<Bs::ButtonGroup as |group|>
  <group.button @color="secondary" {{on "click" this.go}}>Left</group.button>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Middle</group.button>
  <group.button @color="secondary" {{on "click" this.go}}>Right</group.button>
</Bs::ButtonGroup>

<Bs::ButtonGroup @size="sm" as |group|>
  <group.button @color="secondary" {{on "click" this.go}}>Left</group.button>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Middle</group.button>
  <group.button @color="secondary" {{on "click" this.go}}>Right</group.button>
</Bs::ButtonGroup>

Vertical variation

{{! TODO: }}
<Bs::ButtonGroup @vertical={{true}} as |group|>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Button</group.button>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Button</group.button>
  <group.button
    @color="secondary"
    {{on "click" this.go}}
  >Button</group.button>
</Bs::ButtonGroup>