Auth
StepIcon
The hero icon block of an auth step (Figma "Step Icon" 183:519): a 56 px rounded square with one glyph.
Soft (lilac) for "check your e-mail", Solid (brand) for a provider hand-off or a done state; badge="spinner" while something finishes elsewhere. Decorative: the step's headline says what happens.
<StepIcon tone="soft"><MailCheck /></StepIcon>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Step Icon
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).
Tone · Soft
| Badge | Step Icon |
|---|---|
| None |
Tone · Solid
| Badge | Step Icon |
|---|---|
| None | |
| Spinner |
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 |
|---|---|---|---|
| tone? | "soft" | "solid" | null | "soft" | |
| badge? | "none" | "spinner" | "none" | Figma `Badge`: `spinner` puts a small spinner disc on the bottom-right corner, while the provider's window is open. |
| className? | string | — | |
| children | ReactNode | — | The glyph (a lucide element, or a provider mark such as GoogleIcon). Swapped per step in Figma. |