Warnings and errors

Warnings Error messages MSG

Introduction

The warning message is a component that informs about necessary configuration actions.

Warning example

This component is themable. Related topic: validation guidelines

Styleguide

Warning styleguide

x: 8px
y: 16px

Box

border: 1px solid $warning
min-height: 50px
width: 100%
background-color: #fff
border-radius: 3px
vertical-align: center

Text

font-family: Bernina Sans Regular
font-size: 14px
color: $gray-700

Warning styleguide

Icon box

background-color: $warning
border: 1px solid $warning
border-radius: 3px
width: 36px
vertical-align: center

Warning icon

Incident icon

icon-width: 20px
icon-height: 20px
color: #fff

Please always use the incident icon as an indicator for the warning message.

Warnings on dark background

Warning on dark background

Icon box

background-color: $warning

Box

border: none

Single line warning

Warning styleguide

More than 2 rows warning

Warning messages with more than 2 lines of text should include a headerline.

Warning styleguide

x: 8px

Error messages

Error messages warn users about failed actions or other events that do not require actions from the user.

Warning styleguide Error

Error icon

Critical event icon

icon-width: 20px
icon-height: 20px
color: #fff
vertical-align: center

Box

min-height: 50px
width: 100%
background-color: #fff
border: 1px solid $error
border-radius: 3px
vertical-align: center

Icon box

background-color: $error
border: 1px solid $error
border-radius: 3px
width: 36px

Please, always use the critical event icon as an indicator for the error messages. For more information about validation in forms please read the validation guidelines

Error messages on dark background

Error on dark background

Icon box

background-color: $red-400

Box

border: none

Position of warnings

For warning messages that refer to a specific content such as a form, the message size should not exceed the width of specific content.

You can see an example of the warning usage concerning a specific content in the validation guidelines.