Toast
Toast is used to show message on top of an overlay to update that users the status of system.
Notification
Notification pop up with toast
Notification Type
Indicate
type of Notification will show corresponded icon & colors, type can be 'info', 'warning', 'error', or 'success'.Custom icon
Then icon in Notification can be replaced by any element.
Placement
Toast placement can be assign around the trigger element in different positions, there are 6 placement options available.
Closable
Enable
closable prop to show close icon in NotificationAlert
Toast can also use with Alert.
Duration
Setting
duration prop on Notification to specify the duration of open, toast will never dismiss if duration value is 0.CustomClose
toast.push() will return a uid of notification instance, we can pass this uid to toast.remove(uid) method to remove the corresponded notification.API
toast
| 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 |
ToastProps
| 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' |
Notification
| 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 |