<!--
  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 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 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 danger}} aria-label="danger" {{/if}} type="button">
  With icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</button>
<button class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}{{#if small}} {{@root.prefix}}--btn--sm{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button" disabled>
  With icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</button>
<a class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}}" {{#if danger}} aria-label="danger" {{/if}} type="button"
  role="button" href="#">
  Link
</a>
<a class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}} {{@root.prefix}}--btn--disabled {{@root.prefix}}--disabled"
  {{#if danger}} aria-label="danger" {{/if}} type="button" role="button" tabindex="-1">
  Link
</a>
<a class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}}" {{#if danger}} aria-label="danger" {{/if}} type="button"
  role="button" href="#">
  Link with icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</a>
<a class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}} {{@root.prefix}}--btn--disabled{{#if small}} {{@root.prefix}}--btn--sm{{/if}}"
  {{#if danger}} aria-label="danger" {{/if}} type="button" role="button" tabindex="-1">
  Link with icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</a>
<p class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}}" {{#if danger}} aria-label="danger" {{/if}} role="button"
  tabindex="0">
  Alternate root node
</p>
<p class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}} {{@root.prefix}}--btn--disabled" {{#if danger}} aria-label="danger"
  {{/if}} role="button" tabindex="-1">
  Alternate root node
</p>
<p class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}}" {{#if danger}} aria-label="danger" {{/if}} role="button"
  tabindex="0">
  Alternate root node with icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</p>
<p class="{{@root.prefix}}--btn {{@root.prefix}}--btn--{{variant}}
  {{#if small}} {{@root.prefix}}--btn--sm{{/if}} {{@root.prefix}}--btn--disabled" {{#if danger}} aria-label="danger"
  {{/if}} role="button" tabindex="-1">
  Alternate root node with icon
  {{#if @root.featureFlags.componentsX}}
  {{ carbon-icon 'Add16' class=(add @root.prefix '--btn__icon') }}
  {{else}}
  <svg class="{{@root.prefix}}--btn__icon" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    aria-hidden="true">
    <path d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
  </svg>
  {{/if}}
</p>
