PopUp

Overview

PopUp is the popup shell: a reka-ui Dialog wrapper with a media slot and a default content slot. It's the foundation behind the curated presets PopUpInfo, PopUpNewsletter, and PopUpPromotion, which render their fields into that default slot. Reach for the shell directly when none of the presets fit; otherwise use a preset.

Reka-ui Dialog semantics handle focus management and keyboard interaction.

Layout and dismiss controls

The shell exposes the dismiss and layout knobs presets inherit:

• closeOnEsc (default true) decides whether the Escape key closes the popup.
• closeOnOverlayClick (default true) decides whether clicking the backdrop closes the popup.
• media renders on the leading side (top on mobile, left or right on desktop). The media slot lets you replace the default <Media> rendering with custom markup.
• backgroundMedia overlays a full-popup background image behind both the media slot and the content stack.
• imagePositionDesktop ('left' or 'right') flips desktop layout direction when media is present.
• alignment ('left' or 'center') sets the horizontal alignment of the content stack.
• containerStyle ('boxed' or 'full') controls the mobile container; on desktop the popup is always boxed and centered.
• closeButtonVariantMobile and closeButtonVariantDesktop accept any Button variant; the shell renders both close buttons and CSS picks one per viewport.
• close event fires when the user dismisses the popup (alongside update:open).

Key Business & UX Benefits

• One popup shell powers every dialog on the site, so brand chrome and motion stay identical from newsletter prompt to terms notice.
• Reka-UI Dialog semantics deliver focus traps, escape handling, and ARIA roles out of the box, removing the accessibility risk that popups usually carry.
• The media slot plus content stack gives designers a clean canvas for custom popups when no preset fits.
• Builds the foundation for PopUpInfo, PopUpNewsletter, and PopUpPromotion, keeping one accessibility audit valid across every variant.

Usage

<PopUp v-model:open="showModal">
    <template #media>
      <MediaPreview :media="popupImage" />
    </template>
    <TextGroup heading="..." subline="..." />
    <Button>CTA</Button>
    <!-- Or drop in a preset: <PopUpInfo ... /> -->
  </PopUp>

Feature List

API Reference