Confirmation Modals

Statamic ships with a <Modal> UI component you can use to build custom modals.

However, if all you need is a confirmation prompt, you can use the ConfirmationModal component instead. You should use v-if to make it appear.

<confirmation-modal
    v-if="confirming"
    title="Do the thing"
    @confirm="doTheThing"
    @cancel="confirming = false"
/>

Props#

Prop	Description
`title`	Header text
`bodyText`	Provide a simple string as a content of the modal. Defaults to `Are you sure?`.
`buttonText`	Text for the confirmation button label. Defaults to `Confirm`.
`danger`	Boolean for making the modal red. Useful for when you're doing something scary like deletions.

Event	Description
`confirm`	When the user clicks the confirm button.
`cancel`	When the user clicks the cancel button.

The default slot replaces the bodyText prop. Useful when you need something more complicated than a single paragraph.

<confirmation-modal ...>
    <p>More complicated</p>
    <p>stuff here.</p>
</confirmation-modal>