Skip to content

Toast

The Toast component provides a lightweight and easily customizable alert message to push notifications to your users.

Composable Components

The Toast is made up of several components that allow you to compose different types of toast layouts.

ComponentDescription
ToastRootThe root component element
ToastHeaderThe element that contains the toast header content
ToastContentThe element that contains the main content of the toast
ToastActionThe trigger button that can be used to handle dismissing a toast

Examples

html
<ToastRoot v-model="showToast" :autoClose="4" @toast-root:close="handleToastClose">
    <ToastContent class="toast" :class="`toast-${getNotification.type}`">
        <i class="fa-solid fa-exclamation" v-if="getNotification.type === 'error'"></i>
        <i class="fa-solid fa-check" v-if="getNotification.type === 'success'"></i>
        <p class="inline">{{ getNotification.message }}</p>
    </ToastContent>
</ToastRoot>

An example can be seen in /frontend/App.vue

ToastRoot

Component Props

PropDescriptionOptions
positionthe position to place the toastbottom-left, bottom-right, top-right, top-left
autoCloseauto close toast after N seconds. Defaults to 0

Component Events

EventDescriptionArgs
toast-root:closeemits when the toast closes

CSS Classes

ClassDescription
.toast-rootthe class applied to the root element
.toast-root-position-topthe class applied to the root element when positioned top
.toast-root-position-rightthe class applied to the root element when positioned right
.toast-root-position-leftthe class applied to the root element when positioned left
.toast-root-position-bottomthe class applied to the root element when positioned bottom

ToastHeader

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.toast-headerthe class applied to the root element

ToastContent

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.toast-contentthe class applied to the root element

ToastAction

Component Props

PropDescriptionOptions
--

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.toast-actionthe class applied to the root element