29 lines
1.4 KiB
Plaintext
29 lines
1.4 KiB
Plaintext
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"><span class="icon-[lucide--fingerprint] size-6" aria-hidden="true"></span></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>
|
|
<span class="icon-[lucide--arrow-right] wire-auth-action__arrow" aria-hidden="true"></span>
|
|
</a>
|
|
{:else}
|
|
<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">
|
|
<span class="wire-auth-action__icon"><span class="icon-[lucide--fingerprint] size-6" aria-hidden="true"></span></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>
|
|
<span class="icon-[lucide--arrow-right] wire-auth-action__arrow" aria-hidden="true"></span>
|
|
</button>
|
|
{/if}
|
|
</span>
|
|
}
|
|
}
|