PersonaToast
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
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.
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
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.
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'
})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',
})Variables
Toast use local CSS variables on .toast-container for enhanced real-time customization.
sass
--p-toast-z-index: theme(zIndex.toast); //1090API
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 |
text | String | - | Toast text message, required |
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 |
toastClass | String | - | Add class to toast component |