The v-overlay component is used to provide emphasis on a particular element or parts of it. It signals to the user of a state change within the application and can be used for creating loaders, dialogs and more.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
absolute overlays are positioned absolutely and contained inside of their parent element.
opacity allows you to customize the transparency of v-overlay components.
z-index gives you the ability to easily change the stack order of the v-overlay component.
Using the v-overlay as a background, add a progress component to easily create a custom loader.
Using the v-hover, we are able to add a nice scrim over the information card with additional actions the user can take.