{#if href}
  <a class="{ui}button" href="{href}">
    {> content}
  </a>
{else}
  <div class="{ui}button" tabindex="0" part="button">
    {> content}
  </div>
{/if}

{#snippet content}
  {#if animated}
    {> animated}
  {else}
    {#if isIconBefore}
      {> icon}
    {/if}
    {#if not iconOnly}
      <span class="text">
        {> slot}
      </span>
    {/if}
    {#if isIconAfter}
      {> icon}
    {/if}
  {/if}
{/snippet}

{#snippet icon}
  <ui-icon icon={icon} class="icon" part="icon"></ui-icon>
{/snippet}

{#snippet animated}
  <span class="hidden content">
    {>slot hidden}
  </span>
  <span class="visible content">
    {>slot visible}
  </span>
{/snippet}