Overlay

Overlay directs user attention to its content and away from the overlay background.
Works with any content
Automatically stretches based on the background content


Usage

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

With the position property, you can control the side at which you want to render the content.

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

Properties

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