Design
Web component
Is documented
The component is fully documented
Status
Status
Healthy
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Principles
Use when
- Employ the notification component to engage users with timely, relevant updates or alerts. It's ideal for drawing attention to new activities, messages, or status changes within the application.
- Utilize notifications to convey information that requires immediate attention or action from the user.
Don't use when
- Avoid using the notification component for information that is not crucial or does not require immediate action.
Structure
- Icon
- Notification title
- Notification description
- Close button
Properties
Types
|
Toast |
Toast is for instant notification when an action is completed, failed, etc. |
|
Line |
Line is used for conveying meanings in inline form inputs. |
|
App |
App is for critical system, product updates or warnings on components. |
Status
|
Information |
It is used for general information or interactions. |
|
Success |
It is for actions with positive meanings: completed, in progress, successful. |
|
Warning |
It is used when the context indicates that the action or message requires immediate attention. |
|
Error |
It is used when the context needs to convey that the action is destructive, error, or dangerous. |
Boolean properties
|
Icon |
Icon is for strengthening the message giving its semantic icon. |
|
Dismiss button |
When notifications are not required to close in mandatory conditions. |
Behavior
Notification visibility
Toast notifications can be set to disappear after a certain time, if not critical.
While using toast or app notifications that are critical, they should remain visible until the user acknowledges them.