Overlays
Scrim
The dimmed layer behind a Dialog, Sheet or Drawer (Figma "Scrim" 2056:42260).
The overlays render it for you through scrim="soft|strong"; use it on its own only for a custom full-screen layer. Decorative: it is hidden from assistive tech, and the overlay above it makes the page inert.
<Scrim tone="strong" />Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Scrim
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).
Tone · Soft
| Viewport | Scrim |
|---|---|
| Phone | |
| Desktop |
Tone · Strong
| Viewport | Scrim |
|---|---|
| Phone | |
| Desktop |
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 |
|---|---|---|---|
| tone? | "soft" | "strong" | null | "soft" | |
| className? | string | — |