Toast ​

The VToast component is a Vue component for displaying temporary, dismissible notifications. It can be used to display a message, an icon, and an optional action button.

Usage ​

Basic Usage ​

To use the VToast component, you will need to import ref from vue and create a reactive data property to control the isOpen state of the toast. You can then bind this property to the v-model directive of the VToast component.

Icon ​

You can display an icon in the VToast component by setting the icon prop to the desired icon name.

Placement ​

You can control the placement of the VToast component using the placement prop. The possible values are top, bottom, left, and right.

Colors ​

You can set the color of the VToast component using the color prop. The possible values are the default theme colors, which are primary, secondary, success, warning, error, and info, as well as white.

Slots ​

You can use slots to customize the content of the VToast component. The VToast component has a default slot for the main content and an action slot for an optional action button. The action slot provides a close function that can be called to close the toast.

Props ​

• ❌ = deprecated

Events ​

The VToast component emits the following event:

update:modelValue ​

This event is emitted when the v-model directive of the VToast component is updated. It is triggered whenever the isOpen state of the toast changes.

The payload of the event is an object with a single property:

• value: The new value of the isOpen state, which is a boolean.

Slots ​

The VToast component has the following slots:

default ​

The default slot is used to specify the main content of the toast. It can be used to display a message or any other content you want to show in the toast.

The default slot also receives a prop with a single function:

• close: A function that can be called to close the toast.

action ​

The action slot is used to specify an optional action button for the toast. It is useful when you want to provide a way for the user to interact with the toast, such as by confirming an action or dismissing the toast.

The action slot receives a prop with a single function:

• close: A function that can be called to close the toast.

You can use the close function provided by the action slot to specify the behavior of the action button. For example, you might want to call the close function when the user clicks a "Confirm" button, or you might want to call it when the user clicks a "Dismiss" button.

Here is an example of how to use the action slot:

<template>
  <VToast v-model="isOpen">
    Toast message
    <template #action="{close}">
      <VBtn text size="sm" color="primary" @click="close">Dismiss</VBtn>
    </template>
  </VToast>
</template>

<template>
  <VToast v-model="isOpen">
    Toast message
    <template #action="{close}">
      <VBtn text size="sm" color="primary" @click="close">Dismiss</VBtn>
    </template>
  </VToast>
</template>

CSS Variables ​

:root {
  /* toast */
  --v-toast-wrapper-padding-x: var(--size-spacing-0);
  --v-toast-wrapper-padding-y: var(--size-spacing-3);
  /* panel */
  --v-toast-padding-x: var(--size-spacing-4);
  --v-toast-padding-y: var(--size-spacing-3);
  --v-toast-bg-color: #2f3031;
  --v-toast-text-color: white;
  --v-toast-font-size: var(--size-font-sm);
  --v-toast-font-weight: var(--font-weight-regular);
  --v-toast-width: 328px;
  --v-toast-box-shadow: var(--effect-shadow-lg);
  --v-toast-border-radius: var(--border-radius-lg);
  --v-toast-text-align: left;
  --v-toast-gap: var(--size-spacing-4);
}

:root {
  /* toast */
  --v-toast-wrapper-padding-x: var(--size-spacing-0);
  --v-toast-wrapper-padding-y: var(--size-spacing-3);
  /* panel */
  --v-toast-padding-x: var(--size-spacing-4);
  --v-toast-padding-y: var(--size-spacing-3);
  --v-toast-bg-color: #2f3031;
  --v-toast-text-color: white;
  --v-toast-font-size: var(--size-font-sm);
  --v-toast-font-weight: var(--font-weight-regular);
  --v-toast-width: 328px;
  --v-toast-box-shadow: var(--effect-shadow-lg);
  --v-toast-border-radius: var(--border-radius-lg);
  --v-toast-text-align: left;
  --v-toast-gap: var(--size-spacing-4);
}

Standalone Installation ​

You can also install the Toast component individually via @morpheme/toast package:

npm i @morpheme/toast

npm i @morpheme/toast

<script setup lang="ts">
import VToast from '@morpheme/toast';
</script>

<template>
  <VBtn @click="openToast"> Open Toast </VBtn>
  <VToast v-model="isOpen"> Toast message </VToast>
</template>

<script setup lang="ts">
import VToast from '@morpheme/toast';
</script>

<template>
  <VBtn @click="openToast"> Open Toast </VBtn>
  <VToast v-model="isOpen"> Toast message </VToast>
</template>

Storybook ​

View Storybook documentation here.