Notification - Keep React
Table of Contents#
- Default Notification
- Notification With Icon
- Notification With Avatar
- Notification With Card
- API Reference
Default Notification#
Default Notification component in the Keep React allows you to display informative messages or alerts to users.
Notification With Icon#
The Notification component in the Keep React can be enhanced with icons, providing users with visual cues alongside the message. This combination of text and icon ensures that notifications are both informative and easily comprehensible.
Notification With Avatar#
The Notification component in the Keep React can include avatars, allowing you to associate user images with notifications. This integration enhances user recognition and engagement by providing personalized and context-rich notifications.
Notification With Card#
The Notification component in the Keep React can be enhanced with a card layout, allowing you to present notifications in a visually structured manner. This design accommodates more content and context, providing users with detailed and informative notifications.
API Reference#
Explore the available props for the notification component
| Property | Description | Type | Default |
|---|---|---|---|
| additionalContent | Additional content to include in the notification. | ReactNode | Content |
| infoIcon | An icon to display as additional information. | ReactNode | <Cookie/> |
| dismiss | Determines whether the notification can be dismissed. | boolean | false |
| headerBannerSrc | Source URL for the header banner image. | string | None |
| onDismiss | Function to call when the notification is dismissed. | boolean | (() => void) | false |
| showNotification | Determines if a notification should be shown. | boolean | false |
| position | Sets the position of the notification. | top-left top-right bottom-left bottom-right | top-left |