Note

This documentation describes the Modal Vue component for native UI views, for Xml templates see modal.

Modal

A configurable dialog/modal powered by PrimeVue Dialog. Supports sizes, positions, dismissal options, and focus management.

Import

import { Modal } from '@neos/design-system'

Props

Prop	Type	Default	Description
isOpen	boolean	—	Required. Controls modal visibility (v-model:isOpen)
size	'auto' \| 'small' \| 'medium' \| 'large' \| 'full'	'auto'	Modal width preset
position	'center' \| 'top' \| 'bottom' \| 'left' \| 'right' \| 'topleft' \| 'topright' \| 'bottomleft' \| 'bottomright'	'center'	Screen position
dismissOnClickOutside	boolean	false	Close when clicking outside the modal
dismissible	boolean	false	Show a close (×) button in the header
maximizable	boolean	true	Show a maximize/restore button in the header
focus	boolean	true	Auto-focus the modal when opened

Emits

Event	Payload	Description
update:isOpen	boolean	Emitted when the modal should close
close	—	Emitted alongside update:isOpen when closing

Slots

Slot	Description
header	Modal header content (title area)
body	Main modal content
footer	Modal footer (typically action buttons)

Usage Examples

Confirmation dialog

<Modal v-model:is-open="showConfirm" size="small" :dismissible="true">
  <template #header>
    <Text weight="strong">Confirm Delete</Text>
  </template>
  <template #body>
    <Text>Are you sure you want to delete this record? This action cannot be undone.</Text>
  </template>
  <template #footer>
    <ButtonsLayout>
      <button label="Cancel" @click="showConfirm = false" />
      <button label="Delete" variant="danger" @click="deleteRecord" />
    </ButtonsLayout>
  </template>
</Modal>

Large form modal

<Modal v-model:is-open="showForm" size="large" :dismissible="true" :dismiss-on-click-outside="true">
  <template #header>
    <Text weight="strong">Create New Customer</Text>
  </template>
  <template #body>
    <GridLayout columns="* *" gap="medium">
      <StringFormField property-name="firstName" />
      <StringFormField property-name="lastName" />
      <StringFormField property-name="email" />
      <StringFormField property-name="phone" />
    </GridLayout>
  </template>
  <template #footer>
    <ButtonsLayout>
      <button label="Cancel" @click="showForm = false" />
      <button label="Create" variant="primary" @click="create" />
    </ButtonsLayout>
  </template>
</Modal>

Full-screen modal

<Modal v-model:is-open="isOpen" size="full" :maximizable="false">
  <template #body>
    <ReportViewer :options="reportOptions" />
  </template>
</Modal>