# MOverlay

An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.


## Props

| Name | Description | Type | Default |
| --- | --- | --- | --- | 
| `isVisible` | Controls the visibility of the overlay. | `boolean` | - |
| `dialogLabel` | Accessible label for the overlay dialog. | `string` | - |

## Slots

| Name | Description |
| --- | --- |
| `default` | Use this slot to insert a centered content inside the overlay. |

## Dependencies

### Used By

- [MDrawer](../drawer)
- [MModal](../modal)

### Graph

```mermaid
graph TD;
  MDrawer --> MOverlay
  MModal --> MOverlay
style MOverlay fill:#008240,stroke:#333,stroke-width:4px
```