Scrim

A scrim is a visual element that blocks the interaction with the background elements, allowing only to interact with the elements inside the scrim.

You can create a scrim using the class scrim. By default, all elements inside the scrim will be centered in the screen.

<div class="scrim">
    Content of the scrim
</div>

Customize

The scrim element will apply the styles defined in the dialogs.scrim field of your theme configuration.

export default {
    dialogs: {
        scrim: {
            backgroundColor: "rgba(0, 0, 0, 0.5)",
        },
    },
    // ...other configuration
};