PraxisDialog

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

Usage

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

const visible = ref(false)
</script>

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

  <PraxisDialog 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>
  </PraxisDialog>
</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.
closable	boolean	true	Shows the × close button in the header.
dismissableMask	boolean	false	Closes the dialog when clicking the overlay backdrop.
style	string | object	undefined	Inline styles for the dialog container.

Emits

Event	Payload	Description
update:visible	boolean	Emitted when the dialog is closed. Set visible to false.
hide	void	Emitted after the dialog finishes its close transition.

Slots

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