OpenMailboxAction
The webmail shortcut under "Confira seu e-mail" (Figma "Open Mailbox Action" 183:606): a card-coloured pill with the mail glyph on a brand block, the inbox name and an external-link mark.
It opens the inbox in a new tab, so the sign-in tab stays where it is. Show it only when the domain maps to a known webmail, and only from sm up (className="hidden sm:flex"): a phone has the mail app itself.
<OpenMailboxAction href="https://mail.google.com" target="_blank" rel="noopener">Abrir o Gmail</OpenMailboxAction>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Open Mailbox Action
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 | Hover |
|---|---|
| Abrir o Gmail | Abrir o Gmail |
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 |
|---|---|---|---|
| children | ReactNode | — | Figma `Label`: "Abrir o Gmail". Name the inbox: a generic "Abrir o e-mail" is the one thing the person cannot act on. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element keeps the look (`<NextLink href="…" />`, `<button />`). |
| className? | string | — |
ProviderAction
A sign-in provider pill (Figma "Provider Action" 183:582): the dark shell with the provider mark on a brand block, "Continuar com Google/Apple".
ResendAction
Resend the link or the code (Figma "Resend Action" 183:619): the full-width outline button of an auth step that carries its own cooldown.