Skip to content
kerfjsGitHub

MagicLinkSent

The "check your inbox" screen, with a resend countdown.

SourcePackage @kerf-js/veneer

Preview

tsx
import { state } from '@kerf-js/core'import { Button, MagicLinkSent } from '@kerf-js/veneer'export function Inbox() {  const email = PEOPLE[2]!.email  const changing = state(false)  return (    <>      {changing.value ? (        <Button          emphasis="outline"          tone="neutral"          onClick={() => (changing.value = false)}        >          Back to the sent screen        </Button>      ) : (        <MagicLinkSent          heading="h3"          email={email}          resendIn={15}          onResend={() => {}}          onChangeEmail={() => (changing.value = true)}        />      )}    </>  )}const PEOPLE = [  {    id: 'mara',    name: 'Mara Lindqvist',    email: 'mara@kerf.dev',    role: 'Owner',    team: 'Platform',    initials: 'ML',  },  {    id: 'jun',    name: 'Jun Tanaka',    email: 'jun@kerf.dev',    role: 'Admin',    team: 'Platform',    initials: 'JT',  },  {    id: 'priya',    name: 'Priya Raman',    email: 'priya@kerf.dev',    role: 'Member',    team: 'Web',    initials: 'PR',  },  {    id: 'tomas',    name: 'Tomás Oliveira',    email: 'tomas@kerf.dev',    role: 'Member',    team: 'Web',    initials: 'TO',  },  {    id: 'lena',    name: 'Lena Fischer',    email: 'lena@kerf.dev',    role: 'Member',    team: 'Data',    initials: 'LF',  },  {    id: 'noor',    name: 'Noor Haddad',    email: 'noor@kerf.dev',    role: 'Viewer',    team: 'Data',    initials: 'NH',  },  {    id: 'sam',    name: 'Sam Okafor',    email: 'sam@kerf.dev',    role: 'Member',    team: 'Mobile',    initials: 'SO',  },  {    id: 'ines',    name: 'Inés Vidal',    email: 'ines@kerf.dev',    role: 'Viewer',    team: 'Mobile',    initials: 'IV',  },]

Installation

npm install @kerf-js/veneer

Usage

tsx
import { MagicLinkSent } from '@kerf-js/veneer'

Accessibility

  • This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and veneer's parts keep their roles and labels.

API Reference

PropTypeDefaultDescription
emailstring—Where it went.
titleunknown—The heading.
ledeunknown—One line under it.
headingHeading—The title's level.
resendInnumber30Seconds before Resend opens.
mailHrefstring—Shows Open email app.
EventTypeDefaultDescription
onResend(() => void)—Shows Resend.
onChangeEmail(() => void)—Shows Change email.
onBack(() => void)—Shows Back.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="lede"]

lederow

RelatedSign inReset password