This is a draft component and subject to change!

Dialog

Dialogs interrupt users with urgent information, details, or actions. They appear in response to an action the user has performed.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Dialog

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Icon

Icon

type Icon = typeof icons[number];

tick

The icon for the dialog

 

alertarrow-downarrow-leftarrow-rightarrow-upbellcalendarchartchevron-downchevron-leftchevron-rightchevron-upcircle-outlinecircle-solidclockcopycross-smallcrossdeletedevicedownloadediteditoreye-openeye-slashexternalfiltergrid-dots-verticalgrid-fullgrid-half-horizontalgrid-half-verticalgrid-one-by-twogrid-two-by-twohaltheart-rateinfolaunchlinkloadinglockloginlogoutlungsmailmenuminusmorenotificationphonepluspreferencesprofilequestionreceiptredorefreshreloadsearchsettingssign-postsorting-ascsorting-descsupporttemperaturetickundouploaduserusers

Icon Background

string

The background colour of the icon

 

Title

string

Required

The primary title for the modal

 

Text

string

The primary text description for the user

 

Persistent

boolean

false

Defines if the modal can be closed by clicking outside the modal

Toggle Prop

Destructive

boolean

false

Defines if the modal represents a destructive action

Toggle Prop

Is Loading

boolean

false

Changes the dialog to a loading state

Toggle Prop

Dialog Example

A dialog is an opinionated version of a modal.

<template>
  <DocExample>
    <MedKitButton label="Open Dialog" @click="dialog = true" />
    <MedKitDialog v-model="dialog" title="Title" text="Lorem ipsum dolor sit amet, consectetur adipiscing eli.">
      <MedKitButton label="Primary Action" kind="primary" @click="dialog = false" />
      <MedKitButton label="Secondary Action" kind="secondary" @click="dialog = false" />
      <MedKitButton label="Cancel" kind="tertiary" @click="dialog = false" />
    </MedKitDialog>
  </DocExample>
</template>

Destructive Dialog

<template>
  <DocExample>
    <MedKitButton label="Open Dialog" @click="dialog = true" />
    <MedKitDialog v-model="dialog" destructive title="Delete draft?" icon="delete">
      <template #text>
        <p>This action cannot be undone.</p>
        <p>Are you sure you want to continue?</p>
      </template>
      <MedKitButton label="Destructive Action" kind="primary:destructive" @click="dialog = false" />
      <MedKitButton label="Secondary Action" kind="secondary" @click="dialog = false" />
      <MedKitButton label="Cancel" kind="tertiary" @click="dialog = false" />
    </MedKitDialog>
  </DocExample>
</template>

Loading State

<template>
  <DocExample>
    <MedKitButton label="Open Dialog" @click="dialog = true" />
    <MedKitDialog v-model="dialog" isLoading title="Processing" text="Please do not refresh or close your browser.">
      <MedKitButton label="Close" kind="tertiary" @click="dialog = false" />
    </MedKitDialog>
  </DocExample>
</template>