Modals for normal, warning and critical actions (2020)
In the Stratio design system we defined 3 different kind of modals for normal, warning and critical actions. Let me introduce each kind below.
Normal action
We implemented it when we needed a regular interaction with the user, for example: rename a folder, make a selection between different options, create a specific configuration in some particular situations, etc. As I said, it was thought for a modal's regular use.
The button is a CTA with the same characteristics as the CTA buttons used in the entire product.
Warning action
We thought this one to be use in case that the user has chosen an action that can be undone but it is not a critical one. For example, to inform the user about exiting without saving any change the user did.
In this case, we decided to add an icon in the header that represents a warning message. The CTA turns red because it is an important decision that cannot be undone, so the user has to focus on the information that is shown in the modal.
Critical action
And to conclude, I am going to explain the modal for critical actions. It is used when the critical data are going to be damaged in any way. For example, in the case shown below, if you delete the folder, you are deleting some services that are inside, so deleting them, the information that they process will be damaged.
We decided again to add an icon in the header that represents the severity. The CTA is also red because it is an important decision that cannot be undone, so the user has to focus on the information that is shown in the modal. And even that, the decision can generate some damage to the system.
There is something particular that we added for this modal: the double confirmation. First of all, you have to fill the input box with the word "DELETE", and after that, the delete button will be unlocked and able to be clicked.
