Toasts

Twenty identity toasts in six groups, each with its matching logo state. Drive the live stack, then browse every type at rest.

Read this first

These toasts come from the 13 October 2026 design export. They show the design target, not the live product. Some describe features that are not built, such as codes sent by text message or document upload.

Try the live stack

1. Press a button in the stack to show that toast. The demo also fires toasts on its own.
2. Hover the stack to fan it out. Every timer pauses while you hover, except live countdowns.
3. Drag a toast sideways to dismiss it. A short drag springs back.
4. Press an action, such as Resend or Undo, to see the toast update in place.

Switch Card or Ink and Light or Dark at the top. If you reduce motion, the demo does not autoplay and toasts fade instead of sliding.

Card Ink

Light Dark

01Live stack

Top rightTopBottom rightBottom

Play demo Clear

Taifa IdentityAW

Success

Signed inIdentity verifiedPasskey savedCopiedSigned out everywhere

Info

Code sentCredential sharedAccess removed

Security

New sign-inSession expiringSession lockedDevice removed

Errors

Code didn’t matchPasskey cancelledToo many attempts

Progress

Upload documentRegistry check · passesRegistry check · fails

Connection

OfflineSigned in elsewhere

02All toasts

At rest, with behaviour. Press Show to play one in the stack.

SuccessConfirmations that clear on their own

Signed in Welcome back, Amina.

Capture4s · pauses on hoverShow

Identity verified Your national ID was confirmed with the registry.

Verified5s · pauses on hoverShow

Passkey saved Next time, sign in with Pixel 8.

Fingerprint5s · pauses on hoverShow

ID number copied

Press2.2s · pauses on hoverShow

Signed out everywhere 3 devices were signed out. This one stays signed in.

Cascade5s · pauses on hoverShow

InfoNeutral updates, often with one follow-up action

Code sent Check +254 7•• ••• 412. It expires in 10 minutes.

Resend

Sign5s · pauses on hoverShow

Credential shared Huduma Portal received your verified email.

View access

Credential6s · pauses on hoverShow

Access removed KRA iTax can no longer see your phone number.

Undo

Privacy7s · pauses on hoverShow

SecurityAccount events that may need a decision

New sign-in from Safari iPhone · Nairobi · just now. Was this you?

It was me Secure account

AlertStays until handledShow

Session ending soon You’ll be signed out in 1:00.

Stay signed in

DialLive countdown, doesn’t pauseShow

Session locked Confirm it’s you to keep working.

Unlock Later

LockedStays until handledShow

MacBook Air removed It can no longer sign in to your account.

Undo

Lift7s · pauses on hoverShow

ErrorsSomething failed. Always say what to do next

Couldn’t verify That code didn’t match. 2 tries left.

Try again

Denied6s · pauses on hoverShow

Passkey request cancelled Nothing was changed. Try again or use a code instead.

Try again Use a code

Denied6s · pauses on hoverShow

Too many attempts For your security, try again in 0:30.

LockedLive countdown, doesn’t pauseShow

ProgressStart as loading and turn into the result

Uploading ID document passport-scan.pdf · 2.4 MB

Progress, then VerifiedChanges when doneShow

Checking with the registry… This usually takes a few seconds.

Trace, then VerifiedChanges when doneShow

Checking with the registry… This usually takes a few seconds.

Trace, then DeniedChanges when doneShow

ConnectionNetwork state, updated in place

You’re offline Changes will sync when you reconnect.

Static, Trace, then VerifiedChanges when doneShow

Continued on Pixel 8 Your sign-in moved to your phone. This tab is still signed in.

Federate6s · pauses on hoverShow

EnterDrops in from 30px at 94% scale over 600ms (ease .22, 1, .36, 1). The stack below glides to its new place on the same curve.

StackThree visible, five kept. Toasts behind the front one match its height and peek out 14px each. On hover the stack fans out to real heights and every timer pauses.

Update in placeLoading toasts turn into a success or error result without a new toast: the text fades in, the height animates, and the logo changes state.

ExitTimed toasts lift and fade over 350ms. Dragging past 90px, or a quick flick, throws the toast off sideways. A shorter drag springs back.

Writing a toast

• Say what happened in the title, in a few words.
• Use the body for the one detail that matters, or what to do next.
• Errors always say what to do next.
• Give a toast at most two actions.