# Backdrop

The backdrop component places an overlay over the drop of the entire page. It's useful for displaying loading states.

## Basic Backdrop

To create a basic backdrop, you can use the `New-UDBackdrop` cmdlet and include content to show within the backdrop. The content will be centered on the page. To show the backdrop, use the `-Open` switch parameter.

```powershell
New-UDBackdrop -Content {
    New-UDTypography -Text "Loading..." -Variant h2
} -Open
```

![Backdrop component](https://427210397-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M6jY7sXTmhiAIMGYw_m%2F-MT75ZfbBMSx2Q_nQz6I%2F-MT772Tw-Ce-gcRIbQ2i%2Fimage.png?alt=media\&token=51eba0b9-4317-42aa-bd98-88abcdbed842)

## OnClick Handler

The backdrop provides an `-OnClick` handler that you can use to close the backdrop when clicked. You can use `Set-UDElement` to open and close the backdrop.

```powershell
New-UDBackdrop -Id 'backdrop' -Content {
    New-UDTypography -Text "Loading..." -Variant h2
} -Open -OnClick {
    Set-UDElement -Id 'backdrop' -Properties @{
        open = $false
    }
}
```

## API 

* [New-UDBackdrop](https://github.com/ironmansoftware/universal-docs/blob/master/cmdlets/New-UDBackdrop.txt)