components
Message
v.1.0.0 | Saturn
StorybookProvide contextual information to users.
Components
Play with the component with our playground.
Anatomy
| Name | Description |
|---|---|
1 Required | :width_ Grid (6 columns) - height |
2 Required | Icon helps identify the message type. |
3 Required | By accessibility the messages must always be accompanied by a title that defines the type of message: informative, warning, error... If we need to complement the title we would put it after the type of message. |
4 | Define the message. |
5 | It close the message. |
6 | It performs an action related to the message. |
States
Informative message
Provides information related to an action.
Warning message
Indicates an action that is relevant but not alarming to the user.
Success message
Indicates that an action was successfully processed.
Error message
Indicates an error in an action.
Options
With action
Used to show up in task flows, to notify users of the status of an action. They appear at the bottom right of the primary content area.
With button
When it is necessary it can be used another type of button.
Without action
Used to display short messages.
Layout
Desktop
On desktop it will have a fluid witdh and will depend on the parent element.
Mobile
Behaviours
Hide message
The user can close the message by clicking or tapping on the close icon.
Several lines
The title and body of the message may contain several lines of text.
