Messages

Types

There are three type of messages:

• Text field validation
• Banners
• Settings warning

Text field validation appears as helper texts under textfields. Any blue text contains cues before or during user input. Red text appears when an error has occured.

Banners contain feedback messages that apply to the whole page or section the banner is placed in. Banners can be closed and can contain a link to more information.

Settings warnings occur when the chosen input has a consequence that the user might not expect.

Text field validation

Settings warnings

Banner

Colours

Messages come in various colours with matching icons to communicate the level of importance. Our semantic colours and variants of these are used to support different message types. When choosing a message type, think about the scope of the message.

Error

Error messages are used to bring urgent attention to critical tasks.

{% include '@leviy-components/alert_box/alert_box.html.twig' with {
    'style': 'error',
    'icon': 'error',
    'text': 'There is no internet connection. Please check you’re connected to Wi-Fi or mobile data is turned on.'
} %}

Warning

Warning messages are used to bring possible future problems to the attention, so the user can make a deliberate choice.

{% include '@leviy-components/alert_box/alert_box.html.twig' with {
    'style': 'warning',
    'icon': 'warning',
    'text': 'This action cannot be undone.'
} %}

Success

Success messages are used to communicate actions that have been successful.

{% include '@leviy-components/alert_box/alert_box.html.twig' with {
    'style': 'success',
    'icon': 'check_circle_outline',
    'text': 'User successfully registered.'
} %}

Info

Info messages communicate important information.

{% include '@leviy-components/alert_box/alert_box.html.twig' with {
    'style': 'info',
    'icon': 'info',
    'text': 'If you are experiencing any difficulty with your Leviy account, contact your Administrator or visit Leviy Support.'
} %}