Appearance

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.

vue
<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.

vue
<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.

vue
<Button @click="statusOpened = true">Open Status Dialog</Button>

<Dialog
  description="This is my status dialog"
  header="Success!"
  status="success"
  :open="statusOpened"
  @cancel="statusOpened = false"
  @confirm="statusOpened = false"
></Dialog>

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).

vue
<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>
ts
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.