EmailConfirmRow
Confirms which e-mail got the sign-in link or code (Figma "Email Confirm Row" 2056:47322), with "Trocar".
Not an input: the address is plain text, truncated visually only (the full address is in its title).
<EmailConfirmRow email="mariana@exemplo.com.br" changeLabel="Trocar" changeAriaLabel="Trocar e-mail" onChangeEmail={back} />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Email Confirm Row
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
| Default | Disabled |
|---|---|
mariana@exemplo.com.br | mariana@exemplo.com.br |
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| string | — | Figma `email`: the address the link or code went to. | |
| changeLabel | string | — | Visible label of the change action ("Trocar"). |
| changeAriaLabel? | string | — | Its accessible name, which must contain the visible label ("Trocar e-mail"). |
| onChangeEmail? | MouseEventHandler<HTMLButtonElement> | — | Goes back to the e-mail field. |
| disabled? | boolean | false | Figma State=Disabled: while a resend is in flight. |
| className? | string | — |
NotificationShortcutCard
Something useful to do while waiting (Figma "Notification Shortcut Card" 2130:12389): a bell tile, two lines and a shortcut to the notification settings.
AudioPlayer
Playback of a short recording (Figma "Audio Player" 2056:47284): a 44 px brand play/pause button, a decorative waveform and the time as text.