{{#each tabs as |tab|}}
  {{#if tab.route}}
    {{#link-to
      tab.route
      class=(concat "tab" (unless group " component-radius"))
      disabled=disabled
      current-when=current-when
      data-state=(concat radius " " tab.state)
      style=(html-safe (concat "max-width:" max-width))
    }}
      {{#if tab.icon}}
        <Icon @icon={{concat "#" tab.icon}} class="before-icon" @size={{icon-size}} />
      {{/if}}
      {{#if tab.label}}
        <span
          class="component-label"
          data-size={{label-size}}
          data-state={{concat (if max-width "overflow ") label-state}}
        >
          {{! template-lint-disable }}
          {{{tab.label}}}
        </span>
      {{/if}}
      {{yield tab}}
    {{/link-to}}
  {{else}}
    <a
      role="link"
      class={{concat "tab" (unless group " component-radius") (if (is-active currentTabName tab.name) " active")}}
      disabled={{disabled}}
      data-state={{concat radius " " tab.state}}
      onclick={{action "setCurrentTabName" tab.name}}
      {{! template-lint-disable }}
      style={{html-safe (concat "max-width:" max-width)}}
    >
      {{#if tab.icon}}
        <Icon @icon={{concat "#" tab.icon}} class="before-icon" @size={{icon-size}} />
      {{/if}}
      {{#if tab.label}}
        <span
          class="component-label"
          data-size={{label-size}}
          data-state={{concat (if max-width "overflow ") label-state}}
        >
          {{! template-lint-disable }}
          {{{tab.label}}}
        </span>
      {{/if}}
      {{yield tab}}
    </a>
  {{/if}}
{{/each}}