# Overlays

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.

# Usage

In its simplest form, the v-overlay component will add a dimmed layer over your application.


# Examples

# Props

# Absolute

absolute overlays are positioned absolutely and contained inside of their parent element.

# Opacity

opacity allows you to customize the transparency of v-overlay components.

# Z index

z-index gives you the ability to easily change the stack order of the v-overlay component.

# Misc

# Advanced

Using the v-hover, we are able to add a nice scrim over the information card with additional actions the user can take.

# Loader

Using the v-overlay as a background, add a progress component to easily create a custom loader.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:09/29/2020, 10:11:25 AM