{{#if loading}}
  <div class="loader-wrapper">
    <div class="dot-loader">
      <i class="dot"></i>
      <i class="dot"></i>
    </div>
  </div>
{{/if}}

{{#component
  "-ui-button"
  aria-label=aria-label
  current-when=current-when
  disabled=disabled
  onMouseDown=(action "onMouseDown")
  onMouseUp=(action "onMouseUp")
  onClick=(action "onClick")
  route=route
  tagName=""
}}
  {{#if image}}
    {{! template-lint-disable no-inline-styles }}
    <div style={{html-safe (if label (concat "margin-right: calc(" image-size "px / 2)"))}}>
      {{ui-profile image=image image-radius=image-radius image-size=image-size}}
    </div>
  {{/if}}

  {{#if icon}}
    <Icon
      @icon={{concat "#" icon}}
      class="before-icon"
      @size={{icon-size}}
      style={{html-safe
        (concat
          (if label (concat "margin-right: calc(" icon-size "px / 2);"))
          (if icon-fill (concat "fill:" icon-fill ";"))
          (if icon-stroke (concat "stroke:" icon-stroke))
        )
      }}
    />
  {{/if}}

  {{#if label}}
    <span
      class="button-label component-label"
      data-size={{label-size}}
      data-state={{concat (if (or block max-width) "overflow ") label-state}}
    >
      {{! template-lint-disable }}
      {{{label}}}
    </span>
  {{/if}}

  {{#if hasBlock}}
    <div class="button-yield">
      {{yield}}
    </div>
  {{/if}}

  {{#if extend}}
    <Icon
      @icon={{concat "#" extend-icon}}
      class="extend-icon"
      @size={{extend-size}}
      style={{html-safe (if label (concat "margin-right: calc(" extend-size "px / 4)"))}}
    />
  {{/if}}
{{/component}}