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

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

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',
})

Dismissible

Dismiss button of toast can be show or hide by dismissable props. If dismissable set to true, dismiss button will show.

preview

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

// top-left
toast({
  title: 'Lorem ipsum dolor sit amet.',
  variant: 'filled',
  dismissable: true,
})

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