ConsentHeader
The dependent-side consent header (Figma "Consent Header" 189:1662): the person who asked, name first and request second, and where the person is in the four steps.
No relation words ("pai/mãe"), no family name. Step=None is the Minha proteção page header.
<ConsentHeader avatarInitials="MA" title="Mariana Alves" subtitle="pediu sua autorização" step="2" stepLabel="Passo 2 de 4" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Consent Header
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).
Step · 1
| Consent Header |
|---|
Mariana Alves pediu sua autorização Passo 1 de 4 |
Step · 2
| Consent Header |
|---|
Mariana Alves pediu sua autorização Passo 2 de 4 |
Step · 3
| Consent Header |
|---|
Mariana Alves pediu sua autorização Passo 3 de 4 |
Step · 4
| Consent Header |
|---|
Mariana Alves pediu sua autorização Passo 4 de 4 |
Step · Done
| Consent Header |
|---|
Mariana Alves pediu sua autorização Pronto |
Step · None
| Consent Header |
|---|
Mariana Alves pediu sua autorização |
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 |
|---|---|---|---|
| avatarInitials | string | — | Initials in the brand avatar ("MA"). |
| title | string | — | Figma `title`: who asked, by name ("Mariana Alves"). |
| subtitle | string | — | Figma `subtitle`: what they asked ("pediu sua autorização"). |
| step? | "1" | "2" | "3" | "4" | "done" | "none" | "1" | Figma "Step". `none` is the Minha proteção header, without progress. |
| stepLabel? | string | — | The words beside the progress ("Passo 1 de 4", "Pronto"). Required with a step: the segments are decorative and this is what a reader hears. |
| className? | string | — |