Toast

Toasts display messages to communicate information to the user.

Demo

verified

Attention traveler!

Lost item can be claimed on lower levels

Props

Message

message: string = ''

MiniMarkup

<Toast message="Service Number **[[01928-19912-JK]]**" icon="military_tech"/>

military_tech

Service Number 01928-19912-JK

Details

details: string = ''

MiniMarkup

When the details prop is provided:

• message is displayed as a header, and
• Mini-Markup support is only available for the details prop.

<Toast message="Message Header" details="Message details..."/>

verified

Message Header

Message details...

TIP

Message details are displayed only if the message prop is specified.

Icon

icon: string

<Toast message="A walk in the woods" icon="forest"/>

forest

A walk in the woods

Duration

duration: number

The duration prop specifies the number of seconds elapsed since Toast is mounted, before it emmits a close event. If no duration is specified, the event won't be emmited on a time-out basis.

<Toast message="Check the console!" :duration="5" @close="console.timeEnd('toast-duration')"/>

verified

Check the console!

Theme

theme: theme = 'brand'

<Toast message="Toast message" :theme/>

verified

Toast message

verified

Toast message

check_circle

Toast message

info

Toast message

warning

Toast message

cancel

Toast message

info

Toast message

API Reference

Props

prop	type	default
message	string	''
details	string	''
icon	string	''
duration	number	undefined
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'md'

Configuration options

Toast's configuration options allow to overwrite some Toast props' default values and may be overwritten under the toast root-level configuration option.

toast.<option>	type	default	global
theme	theme		✅
size	size		✅
radius	radius		✅
icon.<theme>	string		✅

Toaster ​

Multiple Toasts can be displayed simultaneously by adding them to a toaster (i.e., toast feed).

After a Toast is mounted, it can be removed from a toaster automatically after a developer defined time-out or manually through user interaction.

When a Toast is added to a toaster, already mounted Toasts are displaced to free up space for the recently added Toast.

Mount toasters

Toasters may be enabled by passing the toaster boolean prop to the Vergil component.

<script setup>
import { Vergil } from '@vrgl/vergil/components'
</script>

<template>
    <Vergil toaster>
        <AppLayout/>
    </Vergil>
</template>

TIP

Toasters z-index value is by default set to 40 through a css variable. See Styles on the Get Started guide to learn how to overwrite Vergil's css variables.

Programmatic use

Toasts can be displayed programmatically through the toast function.

import { toast } from '@vrgl/vergil'

It receives an options object, which has default values for options not specified.

function toast(options: {
    position?: ToasterPosition;
    message?: string;
    details?: string;
    theme?: string;
    icon?: string;
    duration?: number;
}): void

type ToasterPosition = 
    | 'top-start'
    | 'top'
    | 'top-end'
    | 'bottom-start'
    | 'bottom'
    | 'bottom-end';

• position: The position of the toaster the Toast is going to be mounted on.
• duration: The number of seconds a Toast lasts mounted. Defaults to 6.
• icon: If not specified, the icon default value depends on the theme option. Default icon values for each theme are found under the global default configuration option.

The remaining options are the same as the Toast's props.

In order to reduce syntax for frequently used options, there are two additional ways to use toast.

function toast(message: string): void
function toast(theme: string, message: string): void

For instance, the following calls of toast result in the same Toast being displayed thrice.

toast('Please remain calm!')
toast('brand', 'Please remain calm!')
toast({ message: 'Please remain calm!' })

Configuration options

Toaster's configuration options allow to overwrite some toast parameters' default values and may be overwritten under the toaster root-level configuration option. Additionally, only required toaster positions may be specified under toaster.positions.

toaster.<option>	type	default	global
positions	ToasterPosition[]	['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end']
default	ToasterPosition	'bottom-end'
duration	number	6

Examples

Different themes

toast(theme, message[theme])

Different positions

toast({
    position,
    message: position
})