ProtectionStatus
Where a person's protection stands, as an icon and a word in a pill (Figma "Protection Status" 2022:2460).
Use it on person cards, headers and the System Band; surface="on-color" on coloured stage blocks. It is a polite status region, so a change is announced.
<ProtectionStatus status="protecting" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Protection Status
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).
Status · Protegendo
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Protegendo |
| sm · OnColor | Protegendo |
| md · Default | Protegendo |
| md · OnColor | Protegendo |
Status · Conectando
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Conectando |
| sm · OnColor | Conectando |
| md · Default | Conectando |
| md · OnColor | Conectando |
Status · Esperando o sim
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Esperando o sim |
| sm · OnColor | Esperando o sim |
| md · Default | Esperando o sim |
| md · OnColor | Esperando o sim |
Status · Precisa de você
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Precisa de você |
| sm · OnColor | Precisa de você |
| md · Default | Precisa de você |
| md · OnColor | Precisa de você |
Status · Pausado
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Pausado |
| sm · OnColor | Pausado |
| md · Default | Pausado |
| md · OnColor | Pausado |
Status · Pausada
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Pausada |
| sm · OnColor | Pausada |
| md · Default | Pausada |
| md · OnColor | Pausada |
Status · Não aceitou
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Não aceitou |
| sm · OnColor | Não aceitou |
| md · Default | Não aceitou |
| md · OnColor | Não aceitou |
Status · Parou
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Parou |
| sm · OnColor | Parou |
| md · Default | Parou |
| md · OnColor | Parou |
Status · Sem conexão
| Size · Surface | Protection Status |
|---|---|
| sm · Default | Sem conexão |
| sm · OnColor | Sem conexão |
| md · Default | Sem conexão |
| md · OnColor | Sem conexã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 |
|---|---|---|---|
| status? | "awaiting-consent" | "connecting" | "declined" | "disconnected" | "needs-you" | "paused" | "protecting" | "stopped" | null | "protecting" | |
| size? | "md" | "sm" | null | "md" | |
| surface? | "default" | "on-color" | null | "default" | |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Another element keeps the look. |
| className? | string | — | |
| children? | ReactNode | — | Overrides the default word, e.g. "Pausada" for a woman. |
StepBadge
The step number or its outcome in a disc (Figma "Step Badge" 173:186): todo and active show the number, done a check, waiting an hourglass, failed an x and declined a bar.
CalmState
The "nothing is wrong" state (Figma "Calm State" 2025:2719): a calm title, why silence is good, and when the AI last checked.