Messages
Messages to the user as system feedback can be delivered as block message with a longer explanation. The block messages, predominantly used in top or banner positions in the view are defined on this page. Or as inline message directly to an input component. For inline validation messages, see designing text inputs.
Using messages
Messages must include a descriptive text or a combination of text and an icon. Accessibility note: An additional icon adds a point of recognition for color blind users.
Designing
Message text
Message text should provide clear and short as possible feedback to the users and possibly provide next steps if available.
Icon
Icons simplify user recognition and provide ability to shorten message text. Icons are limited to default pre-collection of each message type to ensure recognition.
Types
Neutral or notice message
Neutral or notice block messages provide general user feedback. Accompany the message by the 'infoFilled' icon.
Error message
Error type feature the strongest visual priority of all system messages. Use to alert the user for immediate attention only needs. Accompany the message by the 'error' icon.
Warning message
Warning type provide important messages the user should be cautious about. Accompany the message by the 'warning' icon.
Success message
Success type deliver feedback of a successful user interaction like publishing an article. Accompany the message by the 'success' icon.