actions component

PasskeyButton

Reusable passkey button component.

@wrnexus/ui 0.3.17 props0 slots0 events

Usage

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

<PasskeyButton
  label="Continue with a passkey"
  description="Use fingerprint, face recognition, or device PIN"
  href="href"
  type="button"
  variant="primary"
/>

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

Props and attributes

Prop	Type	Requirement	Default
`label`	`string`	Optional	`"Continue with a passkey"`
`description`	`string`	Optional	`"Use fingerprint, face recognition, or device PIN"`
`href`	`string`	Optional	`""`
`type`	`string`	Optional	`"button"`
`variant`	`string`	Optional	`"primary"`
`disabled`	`boolean`	Optional	`false`
`class`	`string`	Optional	`""`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/PasskeyButton.wrn

component PasskeyButton {
  props {
    label = "Continue with a passkey"
    description = "Use fingerprint, face recognition, or device PIN"
    href = ""
    type = "button"
    variant = "primary"
    disabled = false
    class = ""
  }
  view {
        <span class="wire-catalog-action wire-auth-action {class}">
      {#if href}
        <a href="{href}" class="wire-btn wire-btn--{variant}">
        <span class="wire-auth-action__icon wire-auth-action__icon--passkey">
        <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 11a1 1 0 0 0-1 1c0 2.4-.5 4.7-1.5 6.8M8.2 17.5c.5-1.7.8-3.5.8-5.5a3 3 0 0 1 6 0c0 3.2-.7 6.3-2.1 9M5.1 15.5c.3-1.1.4-2.3.4-3.5a6.5 6.5 0 0 1 13 0c0 2.1-.2 4.2-.7 6.2M3 12a9 9 0 0 1 18 0c0 1.1-.1 2.2-.2 3.3M7.1 20.5c.5-1 .9-2 1.2-3.1M16 21c.7-2.5 1-5.5 1-9a5 5 0 0 0-10 0c0 .7 0 1.3-.1 2" />
        </svg>
        </span>
        <span class="wire-auth-action__copy">
        <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
        <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
        </a>
      {:else}
        <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
        <span class="wire-auth-action__icon wire-auth-action__icon--passkey">
        <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 11a1 1 0 0 0-1 1c0 2.4-.5 4.7-1.5 6.8M8.2 17.5c.5-1.7.8-3.5.8-5.5a3 3 0 0 1 6 0c0 3.2-.7 6.3-2.1 9M5.1 15.5c.3-1.1.4-2.3.4-3.5a6.5 6.5 0 0 1 13 0c0 2.1-.2 4.2-.7 6.2M3 12a9 9 0 0 1 18 0c0 1.1-.1 2.2-.2 3.3M7.1 20.5c.5-1 .9-2 1.2-3.1M16 21c.7-2.5 1-5.5 1-9a5 5 0 0 0-10 0c0 .7 0 1.3-.1 2" />
        </svg>
        </span>
        <span class="wire-auth-action__copy">
        <span class="wire-auth-action__label">{label}</span>{#if description}<span class="wire-auth-action__description">{description}</span>{/if}</span>
        <svg class="wire-auth-action__arrow" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M5 12h14M13 6l6 6-6 6" />
        </svg>
        </button>
      {/if}
    </span>
    }
}