PxDialog

A modal dialog component. Supports header, content, and footer slots. Renders with an overlay backdrop and traps focus when open.

Usage

Demo

<script setup>
import { ref } from 'vue'
import { PxDialog } from 'praxis-vue-ui'

const visible = ref(false)

const confirm = () => {
  visible.value = false
  // handle confirmation
}
</script>

<template>
  <button @click="visible = true">Open Dialog</button>

  <PxDialog v-model:visible="visible" header="Confirm Action">
    <p>Are you sure you want to proceed?</p>
    <template #footer>
      <button @click="visible = false">Cancel</button>
      <button @click="confirm">Confirm</button>
    </template>
  </PxDialog>
</template>

Props

Prop	Type	Default	Description
visiblerequired	boolean	—	Controls dialog visibility. Use with v-model:visible.
header	string	undefined	Dialog title text. Also overridable via the header slot.
modal	boolean	true	When true, shows an overlay backdrop and clicking it closes the dialog.
closable	boolean	true	Shows the × close button in the header and enables closing with the Escape key.
maxWidth	string	'560px'	Max-width of the dialog box.
style	Record<string, string>	undefined	Inline styles for the dialog container.

Emits

Event	Payload	Description
update:visible	boolean	Emitted with false when the dialog should close (backdrop click, Escape, or the × button).

Slots

Slot	Description
default	Main dialog body content.
header	Custom header content (replaces header prop text).
footer	Footer content, typically action buttons.