This is a draft component and subject to change!

Modal

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 Modal

Props Help

For each property in a component you can see:

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

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

Open a modal

<template>
  <DocExample>
    <MedKitButton label="Open Modal" @click="modal = true" />
    <MedKitModal v-model="modal" class="mk-max-w-xl mk-w-[600px]">
      <MedKitModalTitle text="Basic modal header" />
      <div class="mk-flex mk-flex-col mk-space-y-4">
        <MedKitTextField label="Input 1" required />
        <MedKitTextField label="Input 2" required />
        <MedKitTextField label="Input 3" optional multiline />
      </div>
      <MedKitModalActions>
        <MedKitButton label="Back" kind="secondary" @click="onNav" />
        <div class="mk-flex mk-flex-1"></div>
        <MedKitButton label="Cancel" kind="tertiary" @click="modal = false" />
        <MedKitButton label="Save changes" kind="primary" @click="modal = false" />
      </MedKitModalActions>
    </MedKitModal>
  </DocExample>
</template>

Destructive

<template>
  <DocExample>
    <MedKitButton label="Open Modal" @click="modal = true" />
    <MedKitModal v-model="modal" class="mk-max-w-xl mk-w-[600px]" destructive>
      <MedKitModalTitle>Basic modal header</MedKitModalTitle>
      <div class="mk-space-y-4">
        <MedKitTextField label="Input 1" required />
        <MedKitTextField label="Input 2" required />
        <MedKitTextField label="Input 3" optional multiline />
      </div>
      <MedKitModalActions>
        <MedKitButton label="Back" kind="secondary" @click="modal = false" />
        <div class="mk-flex mk-flex-1"></div>
        <MedKitButton label="Cancel" kind="tertiary" @click="modal = false" />
        <MedKitButton label="Save changes" kind="primary:destructive" @click="modal = false" />
      </MedKitModalActions>
    </MedKitModal>
  </DocExample>
</template>

Helper modal components to quickly build standardised modal use cases

Overflow