WRNexusJS/packages/ui/components/button.wrn

component Button {
  props {
    label = "Button"
    loadingLabel = "Loading…"
    description = ""
    as = ""
    href = ""
    target = ""
    rel = ""
    type = "button"
    variant = "default"
    color = "primary"
    size = "default"
    disabled = false
    loading = false
    pill = false
    fullWidth = false
    icon = ""
    iconPosition = "start"
    ariaLabel = ""
    ariaPressed = ""
    ariaExpanded = ""
    ariaControls = ""
    title = ""
    autofocus = false
    controlClass = ""
    class = ""
  }

  view {
    <span
      class="wire-action {fullWidth ? 'w-full' : ''} {class}"
    >
      {#if as === "a" || (as === "" && href)}
        <a
          {...attrs}
          href="{disabled || loading ? '' : href}"
          target="{target}"
          rel="{rel}"
          title="{title}"
          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
          aria-disabled="{disabled || loading}"
          aria-busy="{loading}"
          aria-pressed="{ariaPressed}"
          aria-expanded="{ariaExpanded}"
          aria-controls="{ariaControls}"
          tabindex="{disabled || loading ? '-1' : '0'}"
          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
        >
          {#if loading}
            <span
              class="wire-spinner wire-spinner--inline"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if icon && !loading && iconPosition === "start"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          <span
            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
          >
            <span
              class="wire-btn__label"
            >
              <slot>{loading ? loadingLabel : label}</slot>
            </span>
            {#if description && !loading}
              <span
                class="wire-btn__description"
              >
                {description}
              </span>
            {/if}
          </span>
          {#if icon && !loading && iconPosition === "end"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
            <span
              class="wire-btn__tooltip"
              role="tooltip"
              aria-hidden="true"
            >
              {ariaLabel || label}
            </span>
          {/if}
        </a>
      {:else}
        <button
          {...attrs}
          type="{type}"
          title="{title}"
          autofocus="{autofocus}"
          disabled="{disabled || loading}"
          aria-label="{ariaLabel || ((size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? label : '')}"
          aria-busy="{loading}"
          aria-pressed="{ariaPressed}"
          aria-expanded="{ariaExpanded}"
          aria-controls="{ariaControls}"
          class="wire-btn wire-btn--variant-{variant} wire-btn--color-{color} wire-btn--size-{size} {pill ? 'wire-btn--pill' : ''} {description ? 'wire-btn--with-description' : ''} {fullWidth ? 'w-full' : ''} {controlClass}"
        >
          {#if loading}
            <span
              class="wire-spinner wire-spinner--inline"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if icon && !loading && iconPosition === "start"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          <span
            class="wire-btn__copy {(size === 'icon' || size === 'icon-xs' || size === 'icon-sm' || size === 'icon-lg') ? 'wire-visually-hidden' : ''}"
          >
            <span
              class="wire-btn__label"
            >
              <slot>{loading ? loadingLabel : label}</slot>
            </span>
            {#if description && !loading}
              <span
                class="wire-btn__description"
              >
                {description}
              </span>
            {/if}
          </span>
          {#if icon && !loading && iconPosition === "end"}
            <span
              class="wire-btn__icon {icon}"
              aria-hidden="true"
            >
            </span>
          {/if}
          {#if (size === "icon" || size === "icon-xs" || size === "icon-sm" || size === "icon-lg") && (ariaLabel || label)}
            <span
              class="wire-btn__tooltip"
              role="tooltip"
              aria-hidden="true"
            >
              {ariaLabel || label}
            </span>
          {/if}
        </button>
      {/if}
    </span>
  }
}