Modal

Centered dialog with a title, body and optional footer slot. The size prop (xs, sm, md, lg, xl) sets the dialog width and padding.

Jump to API reference

Import

Vue

import { UiModal } from '@ziyarago/ui/vue'

Basic

Vue

<UiModal title="Trip details" :open="open" @close="open = false">
  Umrah package, 10 nights: 5 in Makkah, 5 in Madinah. Flights and transfers included.
</UiModal>

With footer

Vue

<UiModal title="Share itinerary" :open="open" @close="open = false">
  Send the full day-by-day plan to your group.
  <template #footer>Footer actions go here</template>
</UiModal>

Sizes

Vue

<UiModal
  size="lg"
  title="Trip details"
  :open="open"
  @close="open = false"
>
  Pick xs (320px) up to xl (720px) wide; the demo shows lg.
</UiModal>

API reference

Centered dialog with a title, close button, body and optional footer; use for forms and focused tasks that block the page.

Props

PropType and valuesDefaultDescription

openbooleanfalseShows the dialog when true; renders nothing when false.

titlestring—Header text and aria-label of the dialog.

subtitlestring—Muted line under the title in the header.

closablebooleantruefalse hides the close (x) button in the header.

closeOnBackdropbooleantruefalse ignores clicks on the scrim.

closeOnEscbooleantruefalse ignores the Escape key (focus trap stays active).

widthstring—CSS max-width of the dialog, for example "960px". Overrides the width of size.

sizexssmmdlgxl'md'Scale of width (320 to 720 px max), padding and text.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultDialog body.

footerFooter area, usually action buttons. Rendered only when provided.

titleReplaces the title prop with custom header content.

subtitleReplaces the subtitle prop.

Events

Vue: @name. React: onName.

closeCalled on the close button, a click on the scrim or the Escape key. Set open to false in the handler.

Notes

Has role="dialog" and aria-modal. Escape calls close; on open focus moves into the dialog, Tab is trapped inside it and focus returns to the previously focused element on close.
Put data-autofocus on an element to choose which one receives initial focus (default: first focusable).
Closed state renders nothing, so inner state is lost on close.