Modal

<pa-modal> | PaModal

A customizable modal dialog component that provides a consistent way to display overlay content in your Vue 3 applications. The modal includes built-in form validation, customizable buttons, and flexible content areas for displaying forms, confirmations, or any content that requires user focus.

<pa-modal title="Example Modal">
  <p>Modal content goes here</p>
</pa-modal>

Examples

Basic Modal

<template>
  <div>
    <pa-button variant="primary" @click="showModal">Show Basic Modal</pa-button>
    
    <pa-modal
      ref="modal"
      title="Basic Modal"
      ok-title="Got it"
      cancel-title="Close"
      @hide="onModalHide"
    >
      <h5>Welcome!</h5>
      <p>This is a basic modal example with custom button text.</p>
    </pa-modal>
  </div>
</template>

Modal Sizes

Control the modal width with the size property.

<template>
  <div>
    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
      <pa-button variant="primary" @click="showModal('sm')">Small</pa-button>
      <pa-button variant="primary" @click="showModal('md')">Default</pa-button>
      <pa-button variant="primary" @click="showModal('lg')">Large</pa-button>
      <pa-button variant="primary" @click="showModal('xl')">Extra Large</pa-button>
    </div>
    
    <pa-modal ref="modal" :title="modalTitle" :size="modalSize">
      <p>This is a {{ modalSize || 'default' }} size modal</p>
    </pa-modal>
  </div>
</template>

Importing

import { PaModal } from '@payadvantage/ui-components'

Slots

Slot Name	Description
default	Main content area of the modal. Can contain any HTML, Vue components, or form elements.

Properties

Property	Type	Default	Description
title	String	''	The title displayed in the modal header
okTitle	String	'Okay'	Text for the OK/submit button
okSubmittingTitle	String	'Okay'	Text for the OK button when submitting (loading state)
cancelTitle	String	'Cancel'	Text for the cancel button
size	String	''	Modal size: 'sm', '' (default), 'lg', or 'xl'
hideFooter	Boolean	false	Whether to hide the modal footer (buttons)
hideOkButton	Boolean	false	Whether to hide the OK button (keeps cancel button)
fullWidthButtons	Boolean	false	Whether to make footer buttons full width
centered	Boolean	true	Whether to vertically center the modal
submitDelegate	Function	null	Custom submit handler function. Return false to prevent modal from closing, true to allow closing. Can be async.

Events

Event	Parameters	Description
hide	event: { trigger: string }	Emitted when modal is hidden. Trigger values: 'ok', 'cancel', 'headerclose', 'backdrop', 'escape'
shown	event: Object	Emitted when modal is fully shown
hidden	event: Object	Emitted when modal is fully hidden

Methods

Method	Parameters	Description
show()	None	Programmatically show the modal
hide(trigger?)	trigger?: string	Programmatically hide the modal with optional trigger
submit()	None	Trigger the modal's submit logic
checkValidity()	None	Check if the modal's form is valid
resetValidity()	None	Reset the form validation state

Dependencies

• pa-b-modal - Internal foundation component (not documented for consumer use)
• pa-button - Used for footer buttons
• pa-form - Wraps modal content for form validation
• pa-modal-close-button - Provides the header close button