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.

Component	Description
ToastRoot	The root component element
ToastHeader	The element that contains the toast header content
ToastContent	The element that contains the main content of the toast
ToastAction	The trigger button that can be used to handle dismissing a toast

Examples

<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

Prop	Description	Options
position	the position to place the toast	bottom-left, bottom-right, top-right, top-left
autoClose	auto close toast after N seconds. Defaults to 0

Component Events

Event	Description	Args
toast-root:close	emits when the toast closes

CSS Classes

Class	Description
.toast-root	the class applied to the root element
.toast-root-position-top	the class applied to the root element when positioned top
.toast-root-position-right	the class applied to the root element when positioned right
.toast-root-position-left	the class applied to the root element when positioned left
.toast-root-position-bottom	the class applied to the root element when positioned bottom

ToastHeader

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.toast-header	the class applied to the root element

ToastContent

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.toast-content	the class applied to the root element

ToastAction

Component Props

Prop	Description	Options
--

Component Events

Event	Description	Args
--

CSS Classes

Class	Description
.toast-action	the class applied to the root element