# Dialog
[component-header:sl-dialog]
Dialogs appear above the page and require the user's immediate attention.
```html preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CloseOpen Dialog
```
## UX Tips
- Use a dialog when you immediately require the user's attention, e.g. confirming a destructive action.
- Always provide an obvious way for the user to dismiss the dialog.
- Don't nest dialogs. It almost always leads to a poor experience for the user.
## Examples
### Custom Width
Use the `--width` custom property to set the dialog's width.
```html preview
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
CloseOpen Dialog
```
### Scrolling
By design, a dialog's height will never exceed that of the viewport. As such, dialogs will not scroll with the page ensuring the header and footer are always accessible to the user.
```html preview
Scroll down and give it a try! 👇
CloseOpen Dialog
```
### Ignoring Clicks on the Overlay
By default, dialogs are closed when the user clicks or taps on the overlay. To prevent this behavior, cancel the `slOverlayDismiss` event.
```html preview
This dialog will not be closed when you click outside of it.
CloseOpen Dialog
```
[component-metadata:sl-dialog]