{{#let
  'inline-flex items-center cursor-pointer border border-transparent hover:opacity-80 active:opacity-60 focus:outline-none'
  (hash
    primary='text-white bg-primary'
    default='text-white bg-gray'
    outline='text-gray border-gray'
  )
  (hash
    small='px-2.5 py-1.5 text-sm' default='px-3 py-2 leading-4 text-sm'
  ) as |commonClasses styleClasses sizeClasses|
}}
  <button
    disabled={{this.disabled}}
    type={{this.type}}
    class="{{commonClasses}}

      {{get styleClasses this.style}}

      {{get sizeClasses this.size}}

      {{if @group 'first:rounded-l-md last:rounded-r-md' 'rounded-md'}}"
    ...attributes
    {{on 'click' this.handleClick}}
  >
    {{#if this.isPending}}
      <MdIcon::Loading @spin={{true}} class="mx-1" />
    {{else if @icon}}
      <@icon class="mx-1" />
    {{/if}}
    {{#if this.text}}
      <span class="mx-1">
        {{this.text}}
      </span>
    {{/if}}
  </button>
{{/let}}