Skip to content
search icon
clear
Component Status

A scrim is a temporary visual effect that fades the general interface while allowing the user to focus on an overlay.

Guidelines

Always use a scrim with an overlay component such as a dialog, elevated sidesheet or elevated navigation drawer (mobile only).

FigmaExternal linkFigma design of scrim

Interactions

When the scrim is clicked on or the Esc key is pressed---the overlay component will close, closing the scrim with it.

Demo

✏️ Edit this page on GitHub