Notification
import { Notification } from '@enmovil/ui-design-system';
Shows notifications in a corner of the screen in info, success, warning or error styles. Call showNotification() from anywhere to display one; the Notification component itself renders a button that triggers it.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
label | string | No | — | — | Text of the button the Notification component renders. Defaults to "Show Notification". Not used by showNotification(). |
message | string | Yes | — | — | Title of the notification. |
description | string | No | — | — | Body text shown below the title. Empty when absent. |
type | string | No | — | 'success', 'info', 'error', 'warning' | Style of the notification: info, success, warning or error. Sets the coloured left border and the default icon. Defaults to info. |
placement | string | No | — | 'bottomLeft', 'bottomRight', 'topLeft', 'topRight', 'top', 'bottom' | Corner or edge of the screen where the notification appears. Defaults to topRight. |
duration | number | No | — | — | Seconds before the notification closes by itself. Defaults to 3; 0 keeps it open until it is closed. |
icon | string | No | — | One of 836 predefined values | Name of the icon shown instead of the type's default icon. The icon keeps the type's colour. |
enableStack | boolean | No | — | — | Stacks notifications that pile up in the same place once there are more than stackThreshold. Off by default. |
stackThreshold | number | No | — | — | Number of notifications shown before they stack. Defaults to 3. Requires enableStack. |
showProgress | boolean | No | — | — | Shows a bar counting down the time until the notification closes. Off by default. |
pauseOnHover | boolean | No | — | — | Pauses the auto-close timer while the pointer is over the notification. On by default; set false to turn it off. |
Events
| Name | Signature | When it fires |
|---|---|---|
onClose | (() => void) | Fires when the notification closes. |
Children
Notification does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Info example.
Loading playground…
Storybook
Open Notification in Storybook to try every story with the full set of controls.