Dialog When to use this component Use modals only when the system genuinely needs user attention before continuing. Modals interrupt workflow and cause users to forget what they were doing. so the interruption must be worth the cost.
Preventing irreversible actions. delete confirmations, destructive operations Collecting essential information the system cannot proceed without Breaking a complex task into focused steps Guidelines Button labels: Use descriptive labels ("Delete", "Save changes") not generic "OK". Button order: Cancel then Confirm (left to right).Dangerous actions: Do not highlight the destructive button as primary. Dismissable: Always use modal and dismissableMask. When not to use For side panels, use Drawer For simple confirmations, use useConfirm For mobile bottom sheets, use our BottomSheet How it works Basic Open Dialog
Destructive confirmation Delete item
Without footer Info dialog
<Dialog v-model:visible="visible" modal dismissableMask header="Title"
:pt="{ root: { class: 'w-[400px]' } }">
<p>Content here</p>
<template #footer>
<Button label="Cancel" severity="secondary" @click="visible = false" />
<Button label="Confirm" @click="visible = false" />
</template>
</Dialog>