Consent & billing
CardPager
Position in the consent intro cards (Figma "Card Pager" 2130:12262): dots plus "n de 3".
The label carries the meaning; the dots are decorative.
<CardPager current={2} label="2 de 3" accessibleLabel="Cartão 2 de 3" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Card Pager
Cartão 1 de 3
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).
Current · 1
| Card Pager |
|---|
Cartão 1 de 3 |
Current · 2
| Card Pager |
|---|
Cartão 2 de 3 |
Current · 3
| Card Pager |
|---|
Cartão 3 de 3 |
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 |
|---|---|---|---|
| current | number | — | Figma "Current": the card on screen, from 1. |
| total? | number | 3 | How many cards (3 on the consent intro). |
| label | string | — | The visible words ("1 de 3"). |
| accessibleLabel? | string | — | What a screen reader hears instead ("Cartão 1 de 3"). |
| className? | string | — |