# `m-overlay`

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` |   |
| `onOverlayClick` | Callback fired when the overlay is clicked. | `() => void` |   |

## Slots

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

## Dependencies

### Used By

- [m-drawer](../drawer/README.md)
- [m-modal](../modal/README.md)

### Graph

```mermaid
graph TD;
  m-drawer --> m-overlay
  m-modal --> m-overlay
style m-overlay fill:#008240,stroke:#333,stroke-width:4px
```
