Skip to content

Toast

Simple notification pop-up.

Usage

Simple Usage

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

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

Advance Usage

ts
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:

ts
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:

ts
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:

ts
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.

ts
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.

ts
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
ts
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.

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

API

toast

toast(options: ToastOptions): Promise<void>

OptionsTypeDefaultDescription
typeStringinfoToast type variant, valid value is info, success, warning, error
titleString-Toast title message, required (support markdown)
textString-Toast text message (support markdown)
iconString or Component-Custom toast icon (will replace default icon)
variantStringsimpleToast style variant, valid value is simple, filled
durationNumber3000Duration for which the toast should be displayed. -1 to permanent toast
positionStringbottom-leftPosition for toast, valid value is top-left, top-center, top-right, bottom-left, bottom-center, top-right
iconColorString-Custom color of toast icon, valid value is default, primary, info, success, warning, danger
toastClassString-Add class to toast component

Released under the MIT License.