Skip to content
search icon
Component Status

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


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


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


Edit this page on GitHub