Scrim
Scrim directs user attention to its content and away from the surface receiving a scrim.

Usage

By default, Scrim covers the whole background area and centers its content.

Example
Scrim content

With its position, you can control the side where you want to render the content.

Example
Image title

When used without backgroundSlot, Scrim will become absolute positioned and will take full width and height of the parent.

Scrim content

Properties

NameTypeDefaultRequiredComment
childrenReactNode-falseScrim content
backgroundSlotReactNode-falseBackground content
positiontop, bottom, start, end, covercoverfalse
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element