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.',
})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',
})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 |
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 |
toastClass | String | - | Add class to toast component |