docs GitHub

Design systemDraft

Code display

The code a person reads out or copies: the sign-in code of a new device, the recovery code and secret key of a recovery kit, the invite code. Same style as the pairing code in Authenticator code (mono, groups joined by a hyphen, never wrapping), without the ring.

SurfaceImplementing fileStatus
Appapps/app/ui/components/CodeDisplay.tsx (@vyre/ui)built

Anatomy

A surface-3 box with a hairline: label (caption, strong, label tone), the code (mono, title role, selectable) with a secondary small Copy button beside it, and one muted line (how long it lasts, who to keep it from). Copy turns to "Copied" for 1.5 s. The accessible label reads the code character by character.

Gaps

  • The clipboard does not clear itself after 30 s (see Authenticator code).