base component

Button

Theme-aware, responsive button component.

@wrnexus/ui 0.3.525 props1 slots0 events

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Button
  label="Button"
  loadingLabel="Loading…"
  description="description"
  as="as"
  href="href"
/>

Legacy mount name: data-component="Button".

Props and attributes

Prop	Type	Requirement	Default
`label`	`string`	Optional	`"Button"`
`loadingLabel`	`string`	Optional	`"Loading…"`
`description`	`string`	Optional	`""`
`as`	`string`	Optional	`""`
`href`	`string`	Optional	`""`
`target`	`string`	Optional	`""`
`rel`	`string`	Optional	`""`
`type`	`string`	Optional	`"button"`
`variant`	`string`	Optional	`"default"`
`color`	`string`	Optional	`"primary"`
`size`	`string`	Optional	`"default"`
`disabled`	`boolean`	Optional	`false`
`loading`	`boolean`	Optional	`false`
`pill`	`boolean`	Optional	`false`
`fullWidth`	`boolean`	Optional	`false`
`icon`	`string`	Optional	`""`
`iconPosition`	`string`	Optional	`"start"`
`ariaLabel`	`string`	Optional	`""`
`ariaPressed`	`string`	Optional	`""`
`ariaExpanded`	`string`	Optional	`""`
`ariaControls`	`string`	Optional	`""`
`title`	`string`	Optional	`""`
`autofocus`	`boolean`	Optional	`false`
`controlClass`	`string`	Optional	`""`
`class`	`string`	Optional	`""`

Slots

default

Events

This component does not declare a custom event.

Source contract

Installed source: 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>
    }
}