components
Confirmation Message
v.1.0.0 | Saturn
StorybookPanel that provide feedback or the result of the user's previous action.
Components
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | Illustration has to be 120px in height. |
2 Required | Indicates information about the Drawer. The title can grow depending on the copy. |
3 | It provides the user with more detailed information on the status of the process performed. Can be plain text or unordered <ul> or ordered list <li>. Secondary descrition is used If there is a lot of content in the first description, you can use this additional paragraph of text to structure the information. |
4 | It can contain different types of content such as tables, lists... |
5 | When it is required to make a main, secondary or tertiary actions. |
Variants
- Success: Informs the user that the process has been successfully completed and what the next step is. It can also provide a summary of the transaction.
- Error: It informs the user that the operation could not be carried out correctly, offering a way out in order to solve the errors.
- Warning: It gives the user importat but not blocking information about the operation previously performed.
- Informative: It provides information without feedback connotation to the user.
Vertical
Horizontal
Options
With Primary, Secondary and Tertiary actions
With Primary and Secondary actions
With only Primary action
Without actions
Layout
Desktop
- Fluid width
On desktop it will have a fluid width and will depend on the parent element.
Mobile
- Fluid width
On mobile, the messages will occupy the entire width of the screen and will depend on the parent element in which they are located. Button will go to full width.
Do's and Dont's
Do’s
The icon must be recognizable and related to the type of the message.
Don’t
Don’t use icons other than those defined for each type.
Don’t
Don’t change the alignment of the elements if the case isn’t included it in the documentation.