# Popup
A special type of modal that can be triggered when the page loads (Enter Popup) or when the user tries to leave the page (Exit Popup). This makes it ideal for welcome messages, promotions, or exit-intent offers.
## About
The **Popup** component provides flexible control over when and how it appears. You can trigger it on page **entry**, **exit**, or **both** using the `trigger` prop. The content of the popup can be customized separately for entry (`entryContent`) and exit (`exitContent`). You can also control whether it repeats on every visit, how the backdrop behaves, and apply custom styles.
## Example
The following examples show how to use the Popup component with different triggers and content configurations. You can display a popup when the page loads (onEntry), when the user tries to leave (onExit), or for both events (onEntryExit).
```html
Hello! I'm popup!
```
## Trigger Event
The `trigger` prop defines when the Popup appears. It supports three values: `'onEntry'`, `'onExit'`, and `'onEntryExit'`. The default value is `'onEntry'`.
### Entry Popup
When `trigger` is set to `'onEntry'`, the popup will automatically appear as soon as the page loads. No user interaction is needed to trigger it.
```html
This is entry popup!
```
### Exit Popup
With `trigger` set to `'onExit'`, the popup will appear when the user moves their cursor toward the browser's close button or attempts to leave the page.
```html
This is exit popup!
```
### Both Entry-Exit Popup
Setting `trigger` to `'onEntryExit'` will make the popup appear both when the page loads and when the user tries to exit. It combines the behaviors of `'onEntry'` and `'onExit'`.
```html
The popup appears in both entry and exit time!
```
Above example will display same content on entry and exit popup! But if you want, you can provide separate content for both entry and exit popup using the `entryContent` and `exitContent` snippet.
```html
{#snippet entryContent()}
I'm content from entry popup!
{/snippet}
{#snippet exitContent()}
I'm content from exit popup!
{/snippet}
```
## Popup Repetition
The `repeat` prop controls how often the Popup appears. It accepts three values: `true`, `false`, and `'page'`. The default value is `true`.
- `true` - The popup will appear every time the page loads, even if the user reloads the same page. This is the default behavior.
- `false` - The popup will appear only once, and it won't show again, even if the user navigates to a different page.
- `'page'` - The popup will appear once per page. If the user moves to another page, it will show again, but it won't repeat on the same page.
This feature allows precise control over popup behavior across pages. For example, to display the popup only once per visitor, set `repeat={"{"+false+"}"}`. To show the popup once per page the visitor visits, set `repeat="page"`. The visit history is saved in `localStorage` under the `entryPopUp` and `exitPopUp` keys.
## Popup Backdrop
### Static Backdrop
The `staticBackdrop` prop controls whether the Popup closes when clicking on the backdrop. By default, the backdrop is clickable, and clicking it will close the Popup. Setting `staticBackdrop` to `true` makes the backdrop static, meaning the Popup will remain open even when the backdrop is clicked.
```html
This popup has a static backdrop!
```
### Backdrop Customization
The `backdrop` prop manages the visibility and style of the backdrop. When set to `true` (default), the backdrop is visible. If set to `false`, the backdrop will be hidden. You can also customize the backdrop by passing custom CSS classes, which will apply directly to the backdrop.
```html
This popup has no backdrop!
This popup has a custom backdrop!
```
## Rounded Corners
The `rounded` prop sets the corner radius of the Popup. Available values are: `none`, `sm`, `md`, `lg`, `xl`, `2xl`, and `full`. Default value `xl`.
```html
This popup has no rounded corners!
```
## Customization
You can pass your custom classes to the `Popup` component using the `class` attribute. These classes directly applies to the popup component.
```html
This is a custom popup with some extra classes!
```
## Accessibility
Here is what the Popup handles for you:
- **Keyboard Navigation**: You can use the Tab key to move through the popup and the Esc key to close it, making it easy to navigate with a keyboard.
- **Aria Roles**: The popup has `role="dialog"` and `aria-modal="true"` to let users know it's a modal window. Add your own `aria-labelledby` or `aria-label` attribute to the `Popup` so screen readers can announce its title.
- **Backdrop Handling**: The backdrop uses `role="presentation"`, so it is not announced by screen readers.
- **Custom Content**: The `entryContent` and `exitContent` props take any content, so write it so it reads clearly on its own.
The **Popup** is built to work well with screen readers and keyboard navigation, making sure everyone can use it comfortably.
## Configuration
### Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | 'onEntry' \| 'onExit' \| 'onEntryExit' | `onEntry` | Defines when the popup should appear: on page load, before exit, or both. |
| `repeat` | boolean \| 'page' | `true` | Controls how often the popup appears. If true, it shows on every page load. If false, it appears only once. If 'page', it shows once per page. |
| `backdrop` | boolean \| string | `true` | Enables or customizes the popup backdrop. Accepts a boolean or a custom class for styling. |
| `staticBackdrop` | boolean | `false` | If true, prevents closing the popup by clicking outside of it. |
| `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `xl` | Defines the border-radius of the popup for consistent design. |
### Snippets
| Name | Description |
| --- | --- |
| `entryContent` | Content to display when the popup is triggered on page entry. |
| `exitContent` | Content to display when the popup is triggered on page exit. |
---
Category: Components
Keywords: popup, modal, alert, entrance, exit, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss
Full documentation set: https://www.theui.dev/llms-full.txt