PermissionGate
The screen before a capture step (Figma "Permission Gate" 189:1760): what the step needs and why, asked before the browser prompt.
Denied keeps the way back in words (where to unblock it), not only a retry button. Visual part only: the permission logic stays in the app.
<PermissionGate kind="camera" title="Precisamos da câmera" body="É para a sua foto, guardada criptografada como prova." action={<Button variant="brand" size="48" fullWidth>Permitir câmera</Button>} note="Nada é enviado antes de você confirmar no fim." />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Permission Gate
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).
Kind · Camera
| Ask | Denied |
|---|---|
Precisamos da câmeraÉ para a sua foto, que fica guardada criptografada como prova de que foi você quem concordou. Nada é enviado antes de você confirmar no fim. | A câmera está bloqueadaSem ela não dá pra tirar a foto. Libere o acesso nas configurações do navegador e tente de novo. No iPhone: Ajustes › Safari › Câmera/Microfone. No Android: cadeado na barra de endereço › Permissões. |
Kind · Microphone
| Ask | Denied |
|---|---|
Precisamos do microfoneÉ para gravar você lendo uma frase, que fica guardada criptografada como prova de que você concordou. Nada é enviado antes de você confirmar no fim. | O microfone está bloqueadoSem ele não dá pra gravar a frase. Libere o acesso nas configurações do navegador e tente de novo. No iPhone: Ajustes › Safari › Câmera/Microfone. No Android: cadeado na barra de endereço › Permissões. |
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 |
|---|---|---|---|
| kind | "camera" | "microphone" | — | Figma "Kind": what the next step needs. |
| status? | "ask" | "denied" | "ask" | Figma "State": Ask before the browser prompt, Denied after a refusal. |
| title | string | — | "Precisamos da câmera" / "A câmera está bloqueada". |
| body | ReactNode | — | Why it is needed, or what the refusal blocks. |
| action? | ReactNode | — | The full-width brand 48 Button: "Permitir câmera" / "Tentar de novo". The app's hook owns getUserMedia; this part only draws the screen. |
| note? | ReactNode | — | The small line under it: the privacy promise (Ask) or, on Denied, the text path to unblock it in the browser settings. |
| headingLevel? | "h1" | "h2" | "h1" | Heading level of the title. |
| className? | string | — |