Componentform0.73 KB gzipZero dependencies

Passkey Button

Passwordless sign in trigger.

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add passkey-button

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { PasskeyButton } from "@/components/ui/passkey-button";

<PasskeyButton />

Usage guidance

Use Passkey Button when a ticket stub surface needs Passwordless sign in trigger. Keep props minimal and prefer composition with sibling stubs.

Avoid Passkey Button for long form flows or dense data grids where a dedicated layout block fits better.

Source code

passkey-button.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface PasskeyButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  loading?: boolean;
}

/** Passkey button stub: stamp-framed passwordless sign-in trigger. */
export function PasskeyButton({ loading = false, className, children, ...props }: PasskeyButtonProps) {
  return (
    <button
      type="button"
      className={cn(
        "inline-flex w-full max-w-sm items-center justify-center gap-2 rounded-lg border-2 border-foreground bg-card px-4 py-2.5 font-mono text-xs font-bold uppercase tracking-wider text-foreground shadow-sm outline-1 outline-dashed outline-offset-[-5px] outline-border/60 transition-transform focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:scale-[0.98] motion-reduce:transition-none",
        loading && "opacity-70",
        className
      )}
      {...props}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"><rect x="4" y="10" width="16" height="10" rx="2" /><path d="M8 10V7a4 4 0 0 1 8 0v3" /><circle cx="12" cy="15" r="1.5" fill="currentColor" /></svg>
      {loading ? "Verifying…" : (children ?? "Continue with passkey")}
    </button>
  );
}