Toast

Simple notification pop-up.

Usage

Simple Usage

import { toast } from '@privyid/persona/core'

toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
})

Advance Usage

import { toast } from '@privyid/persona/core'

toast({
  type      : 'error',
  title     : 'Lorem ipsum',
  text      : 'Lorem ipsum dolor sit amet.',
  variant   : 'filled',
  duration  : 5000,
  toastClass: 'custom-toast',
})

Type Variant

There available 4 type variants: info, success, warning, error. default is info

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

preview

Try it:

import { toast } from '@privyid/persona/core'

// info
toast({
  type : 'info',
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
})

// success
toast({
  type : 'success',
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
})

// warning
toast({
  type : 'warning',
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
})

// error
toast({
  type : 'error',
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
})

Style Variant

There available 2 style variant: simple and filled. default is simple

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

Lorem ipsum

Lorem ipsum dolor sit amet.

preview

Try it:

import { toast } from '@privyid/persona/core'

// info
toast({
  type   : 'info',
  variant: 'filled',
  title  : 'Lorem ipsum',
  text   : 'Lorem ipsum dolor sit amet.',
})

// success
toast({
  type   : 'success',
  variant: 'filled',
  title  : 'Lorem ipsum',
  text   : 'Lorem ipsum dolor sit amet.',
})

// warning
toast({
  type   : 'warning',
  variant: 'filled',
  title  : 'Lorem ipsum',
  text   : 'Lorem ipsum dolor sit amet.',
})

// error
toast({
  type   : 'error',
  variant: 'filled',
  title  : 'Lorem ipsum',
  text   : 'Lorem ipsum dolor sit amet.',
})

Position

There available 6 position for toast: top-left, top-center, top-right, bottom-left, bottom-center, top-right default is bottom-left

Try it:

import { toast } from '@privyid/persona/core'

// top-left
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'top-left'
})

// top-center
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'top-center'
})

// top-right
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'top-right'
})

// bottom-left
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'bottom-left'
})

// bottom-center
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'bottom-center'
})

// bottom-right
toast({
  title: 'Lorem ipsum',
  text : 'Lorem ipsum dolor sit amet.',
  position : 'bottom-right'
})

Icon

It's possible to custom icon of toast, like color and icon-name. There are 6 icon colors available for toast: default, primary, info, success, warning and danger. Default icon color is toast icon color it's self.

Custom icon color just work in type-variant info with simple style-variant, and or all type-variant with filled style-variant.

import { toast } from '@privyid/persona/core'
import IconSuccess from '@privyid/persona-icon/vue/checkmark/24.vue'
import IconFailed from '@privyid/persona-icon/vue/trash/24.vue'

toast({
  title: 'Member added to the group',
  icon: IconSuccess,
  iconColor: 'success',
})

toast({
  title: 'Members removed from the group',
  type: 'info',
  variant: 'filled',
  icon: IconFailed,
  iconColor: 'default',
})

Customization

You can add some custom class to Toast element via toastClass.

import { toast } from '@privyid/persona/core'

toast({
  title     : 'Lorem ipsum',
  text      : 'Lorem ipsum dolor sit amet.',
  toastClass: 'mt-28 mr-10',
})

Variables

Toast use local CSS variables on .toast-container for enhanced real-time customization.

--p-toast-z-index: theme(zIndex.toast); //1090

API

toast

toast(options: ToastOptions): Promise<void>

Options	Type	Default	Description
type	String	info	Toast type variant, valid value is info, success, warning, error
title	String	-	Toast title message, required (support markdown)
text	String	-	Toast text message (support markdown)
icon	String or Component	-	Custom toast icon (will replace default icon)
variant	String	simple	Toast style variant, valid value is simple, filled
duration	Number	3000	Duration for which the toast should be displayed. -1 to permanent toast
position	String	bottom-left	Position for toast, valid value is top-left, top-center, top-right, bottom-left, bottom-center, top-right
iconColor	String	-	Custom color of toast icon, valid value is default, primary, info, success, warning, danger
toastClass	String	-	Add class to toast component