The Alert component allows us to communicate about changes or special conditions in pages or sections.
$ yarn add @nimbus-ds/alert
$ npm install @nimbus-ds/alert
The component consists of a box with rounded corners, plus an icon, an optional close button, and a slot that can hold other components.
We use the component when we need to notify the user about an important event, or that requires an action to solve a problem, to complete some data or to wait for an asynchronous confirmation.
The component has 5 different variants that can be used according to the message we need to communicate.
This variant has a neutral connotation, it can be used to communicate useful information without visual emphasis, which helps the user to understand a resource about its operation.
This variant has a neutral connotation, it can be used to communicate useful information with visual emphasis, which helps the user to understand a resource about its operation.
This variant has a positive connotation, it can be used to inform that an action performed by the user was successfully performed.
This variant has an intermediate connotation, it can be used to show relevant information to the user but that does not block its operation, nor does it require immediate attention.
This variant has a negative connotation, it can be used to show critical information that is affecting the user's operation and requires their attention to solve the problem.
Recommendation for use
- Notify that there is unfilled information or settings in another instance
- Notify that there are pending payments in another instance
- Notify that some process is running asynchronously
- Toast - Can be used to notify users in an informational tone, that is, it just describes that something has happened or is happening.
View docs here.