Toast is used to show message on top of an overlay to update that users the status of system.
type of Notification will show corresponded icon & colors, type can be 'info', 'warning', 'error', or 'success'.closable prop to show close icon in Notificationduration prop on Notification to specify the duration of open, toast will never dismiss if duration value is 0.toast.push() will return a uid of notification instance, we can pass this uid to toast.remove(uid) method to remove the corresponded notification.| Method | Description |
|---|---|
toast.push(message: ReactNode, options?: ToastProps): string | Method to pop a toast message, it will return a UID for the current toast |
toast.remove(key: string): void | Method to remove a specify toast message by using the key from push method |
toast.removeAll(): void | Method to remove all toast message |
| Prop | Description | Type | Default |
|---|---|---|---|
| block | Whether to display toast in full width | boolean | false |
| offsetX | Offset X of toast | number | 30 |
| offsetY | Offset Y of toast | number | 30 |
| placement | Placement of toast | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'top-end' |
| transitionType | Transition type of animation | 'scale' | 'fade' | 'scale' |
| Prop | Description | Type | Default |
|---|---|---|---|
| closable | Whether to show close icon | boolean | false |
| customIcon | Custom element beside Notification content | ReactNode | string | - |
| duration | Time in seconds before Notification dismiss, it will never dismiss if duration value is 0 | number | 3000 |
| onClose | Callback when Notification is closed | (e: MouseEvent) => void | - |
| title | Title of Notification | string | - |
| type | Type of Notification | 'info' | 'warning' | 'success' | 'danger' | - |
| width | Width of Notification | number | string | 350 |