Toast

The toast component is a non-disruptive message which is used to provide quick, at-a-glance feedback on the outcome of an action. An example would be making saving changes to forms within the platform. This would be a simple feedback confirmation that the desired action has been performed.

When to use

• To convey general confirmation or actions that aren't critical. As a reaction of a user action, for example a user edits a setting and saves it.
• To convey general confirmation or actions that aren't critical. As a reaction of a user action, for example a user edits a setting and saves it.

When not to use

• To convey actions that are critical.

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 Toast

Props Help

For each property in a component you can see:

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

Text

string

Required

The content that should appear in the toast

 

Duration

number

5000

Controls how long the toast is shown before closing automatically. An empty or 0 or negative duration will not close.

 

Button Label

string

The text label or/aria label of the button. If nothing is specified “Close” will display as a translated string.

 

Type

ToastType

type ToastType = typeof toastTypes[number];

default

The type of the toast.

 

defaultsuccesserror

Toast type

<template>
  <DocExample>
    <div class="mk-flex mk-mt-4 mk-gap-4">
      <MedKitButton label="Show toast" @click="toast = true" />
      <MedKitButton label="Show success toast" @click="toastSuccess = true" />
      <MedKitButton label="Show error toast" @click="toastError = true" />
    </div>
    <div class="mk-w-full mk-relative">
      <MedKitToast v-model="toast" type="default" text="This is my toast message" />
      <MedKitToast v-model="toastSuccess" type="success" text="This is my toast success message" />
      <MedKitToast v-model="toastError" type="error" text="This is my toast error message" />
    </div>
  </DocExample>
</template>

Persistent Toast

If you want the toast to not disappear automatically, remove the duration.

<template>
  <DocExample>
    <div class="mk-flex mk-mt-4 mk-gap-4">
      <MedKitButton label="Show toast" @click="toast = true" />
    </div>
    <div class="mk-w-full mk-relative">
      <MedKitToast
        v-model="toast"
        type="default"
        text="This toast never disappears until it is manually closed"
        :duration="null"
      />
    </div>
  </DocExample>
</template>

Custom actions

Toast can override the close button with a custom action. Set the button label and bind an action to the click:button event.

<template>
  <DocExample>
    <div class="mk-flex mk-mt-4 mk-gap-4">
      <MedKitButton label="Show toast" @click="toast = true" />
    </div>
    <div class="mk-w-full mk-relative">
      <MedKitToast
        v-model="toast"
        type="default"
        text="Item has been deleted"
        buttonLabel="Undo"
        @click:button="customAction"
      />
    </div>
  </DocExample>
</template>