Modal

PModal renders a centered overlay and handles mask clicks.

Demo

Usage

<PModal :close-on-mask-click="true" @close="open = false">
  <template #header>Modal title</template>
  <template #body>Body content</template>
  <template #footer>
    <PButton purpose="tertiary" @click="open = false">Close</PButton>
  </template>
</PModal>

Props

Prop	Type	Default	Notes
`type`	`String`	`main`	Header accent: `main`, `complementary`, `success`, `warning`, `danger`, `info`.
`hideCloseButton`	`Boolean`	`false`	Hides default close button.
`modalClass`	`String`	`''`	Custom container class.
`closeOnMaskClick`	`Boolean`	`true`	Close on backdrop click.

Events

Event	Payload	Description
`close`	—	Emitted on mask click or default close action.

Slots

Slot	Description
`header`	Modal header content.
`body`	Main content.
`footer`	Footer actions.