ProgressRing
A thin progress ring (Figma "Progress Ring" 188:1539), kept only for the queue position: countdown and sync-percentage rings are retired (SC-06, SC-16), time is said as text.
Brand by default, Warm when attention.
<ProgressRing value={60} label="Sua vez na fila"><span>2º</span></ProgressRing>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Progress Ring
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).
Value · 0
| Tone | Progress Ring |
|---|---|
| Brand | 2ºna fila |
Value · 60
| Tone | Progress Ring |
|---|---|
| Brand | 2ºna fila |
| Warm | 2ºna fila |
Value · 100
| Tone | Progress Ring |
|---|---|
| Brand | 2ºna fila |
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 |
|---|---|---|---|
| value | number | — | Figma "Value": 0–100. |
| tone? | "brand" | "warm" | "brand" | Figma "Tone". Warm is for a held turn that is running out. |
| label? | string | — | Accessible name. With it the ring is a progressbar; without it the ring is decorative and the children must say the same thing in words. |
| className? | string | — | |
| children? | ReactNode | — | What sits inside the ring (the queue position, a short sentence). |
QueueCard
The connection queue card (Figma "Queue Card" 188:1708): the place in line and a word estimate in a polite live region while Waiting, then Your turn, then Reserved with the clock time and an explicit way back to the line.
MockQr
A decorative QR-like code (Figma "Mock QR" 188:1525) for examples and screen mocks only: three finder squares and a seeded module pattern.