Dialog

A Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used sparingly.

Basic dialog

Dialogs are controlled via the open property. And they emit events when they are cancelled via the cancel event or when confirmed via the confirm event.

<Button @click="open = true">Open Basic Dialog</Button>
<Dialog
  confirmText="Leave"
  cancelText="Stay"
  description="Your progress won’t be saved if you leave."
  header="Leave Page?"
  :open="open"
  @cancel="open = false"
  @confirm="open = false"
></Dialog>

Danger zone

If the action is destructive or dangerous, the dangerZone property can be set to true to display the dialog in a red color.

<Button @click="opened = true" color="red" secondary>Open Danger Dialog</Button>

<Dialog
  confirmText="Destroy"
  cancelText="Cancel"
  description="Your record will be lost forever."
  header="Destroy record?"
  :open="opened"
  @cancel="opened = false"
  @confirm="opened = false"
  danger-zone
></Dialog>

Setting a status

Dialog has a status prop that accepts either info, success, warning, or error that will add an icon next to the header and a top accent border.

  <div class="flex flex-wrap gap-3">
    <Button @click="infoStatusOpened = true">Info</Button>
    <Button color="orange" @click="warningStatusOpened = true">Warning</Button>
    <Button @click="successStatusOpened = true">Success</Button>
    <Button color="red" @click="errorStatusOpened = true">Error</Button>
  </div>

  <Dialog
    description="This is an info status dialog"
    header="Info"
    status="info"
    :open="infoStatusOpened"
    @cancel="infoStatusOpened = false"
    @confirm="infoStatusOpened = false"
  />
  <Dialog
    description="This is a warning status dialog"
    header="Warning"
    status="warning"
    :open="warningStatusOpened"
    @cancel="warningStatusOpened = false"
    @confirm="warningStatusOpened = false"
  />
  <Dialog
    description="This is a success status dialog"
    header="Success!"
    status="success"
    :open="successStatusOpened"
    @cancel="successStatusOpened = false"
    @confirm="successStatusOpened = false"
  />
  <Dialog
    description="This is an error status dialog"
    header="Are you sure you want to delete the thing?"
    status="error"
    :open="errorStatusOpened"
    @cancel="errorStatusOpened = false"
    @confirm="errorStatusOpened = false"
  />

Async Event Handler

The confirm event can ensure the dialog remains open and displays a loading indicator in the confirm button while certain background processes are happing during the confirm step, such as when subitting a form and waiting for its response.

INFO

Dev Note: The loading state will end when the confirm event handler returns a settled promise (whether it resolves or rejects).

<Button @click="isOpen = true">Open Async Dialog</Button>

<Dialog
  confirmText="Save"
  cancelText="Cancel"
  description="Do you want to save your changes?"
  header="Save Changes"
  :open="isOpen"
  @cancel="isOpen = false"
  @confirm="onConfirm"
></Dialog>

const toasts = useToasts();

async function onConfirm() {
  try {
    await api.updateData();
    toasts.success('Saved successfully!');
  } catch (error) {
    if (error?.response?.status === 400) {
      toasts.error('Failed to save.');
    } else {
      throw error;
    }
  } finally {
    isOpen.value = false;
  }
}

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• <Dialog />