<div>Default</div>
<jqxButtonGroup [mode]="'checkbox'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>
<br />

<div>Primary</div>
<jqxButtonGroup [mode]="'checkbox'" [template]="'primary'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>
<br />

<div>Success</div>
<jqxButtonGroup [mode]="'checkbox'" [template]="'success'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>
<br />

<div>Info</div>
<jqxButtonGroup [mode]="'checkbox'" [template]="'info'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>
<br />

<div>Warning</div>
<jqxButtonGroup [mode]="'checkbox'" [template]="'warning'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>
<br />

<div>Danger</div>
<jqxButtonGroup [mode]="'checkbox'" [template]="'danger'">
  <button style="padding: 4px 16px" value='Left'></button>
  <button style="padding: 4px 16px" value='Center'></button>
  <button style="padding: 4px 16px" value='Right'></button>
</jqxButtonGroup>