<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<button
  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button">
  Button
</button>
<button
  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button" disabled>
  Button
</button>
<button
  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button">
  With icon
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
</button>
<button
  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button" disabled>
  With icon
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
</button>
{{#if hasIconOnly}}
<button
  class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}} {{@root.prefix}}--btn--icon-only {{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-center {{#if small}} {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}">
  <span class="{{@root.prefix}}--assistive-text">Add</span>
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
</button>
{{/if}}
{{#if field}}
<!-- The markup below is for demonstration purposes only -->
<div class="example-input-button-pairing">
  <div class="{{@root.prefix}}--form-item">
    <label for="text-input-3" class="{{@root.prefix}}--label">Text Input label</label>
    <input id="text-input-3" type="text"
      class="{{@root.prefix}}--text-input{{#if light}} {{@root.prefix}}--text-input--light{{/if}}"
      placeholder="Optional placeholder text">
  </div>
  <div class="example-button-wrapper">
    <button class=" {{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}}
      {{@root.prefix}}--btn--sm{{/if}}{{#if field}} {{@root.prefix}}--btn--field{{/if}}" {{#if danger}}
      aria-label="danger" {{/if}} type="button">
      Button
    </button>
  </div>
</div>
{{/if}}
