# Messages

Magento UI library provides mixins for styling messages. There are 4 types of messages:

      info
      warning
      error
      success

To configure styles of each type of message, global variables from variables.less are used. To apply the `.lib-message()` mixin you need to specify the type of message you want to apply styles to.

# Information message

This is an informational message. To apply appropriate style you need to specify the `info` type to the `.lib-message()` mixin.

If there is no content on the page, for example on a category page with no products, a special system information message with `class=”message info empty”` is used. It inherits styles from information message by default. It can be styled to get unique appearance using `.message.info.empty` class.

<div class="example-message-info"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-info {
        .lib-message(info);
    }

# Warning message

This is a warning message. To apply appropriate style you need to specify `warning` type to the `.warning()` mixin.

<div class="example-message-warning"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-warning {
        .lib-message(warning);
    }

# Error message

This is an error message. To apply appropriate style you need to specify `error` type to the `.warning()` mixin.

<div class="example-message-error"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-error {
        .lib-message(error);
    }

# Success message

This is a success message. To apply appropriate style you need to specify `success` type to the `.warning()` mixin.

<div class="example-message-success"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-success {
        .lib-message(success);
    }

# Notice message

This is a notice message. To apply appropriate style you need to specify `notice` type to the `.warning()` mixin.

<div class="example-message-notice"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-notice {
        .lib-message(notice);
    }

# Message with inner icon

To add an inner icon use `.lib-message-icon-inner` mixin. To apply the `.message-icon-inner` mixin, you need to specify the type of a message that you want to apply styles to.

<div class="example-message-1"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-1 {
        .lib-message-icon-inner(notice);
    }

# Message with lateral icon

To add a lateral icon to a message, you need to use the `.lib-message-icon-lateral` mixin. This mixin is configured by the following variables:

      @_message-type: error; // info | warning | error | success | notice
      @_message-position: right; // left | right

<div class="example-message-2"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div> <div class="example-message-3"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    .example-message-2 {
        .lib-message-icon-lateral(error, right);
    }

    .example-message-3 {
        .lib-message-icon-lateral(success, left);
    }

# Custom message style

You can specify your own message type, for example “custom”. To use message mixin for this new type you need to add new variables to _variables.less:

        @message__<b>custom</b>-color: #000;
        @message__<b>custom</b>-background: #fc0;
        @message__<b>custom</b>-link-color: blue;
        @message__<b>custom</b>-link-color-hover: darken(@message-custom-link__color, 20%);
        @message__<b>custom</b>-link-color-active: darken(@message-custom-link__color, 30%);
        @message__<b>custom</b>-border-color: orange;
        @message__<b>custom</b>-icon: @icon-settings;
        @message__<b>custom</b>-icon-color: #000;
        @message__<b>custom</b>-icon-background: #green;
        @message__<b>custom</b>-icon-top: 15px;
        @message__<b>custom</b>-icon-right: false;
        @message__<b>custom</b>-icon-bottom: false;
        @message__<b>custom</b>-icon-left: 0;

And then call message mixin with your new message type

      .lib-message-icon-lateral(custom, left);

<div class="example-message-4"> <div> Lorem ipsum dolor sit <a href="#">amet</a>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div> </div>

    @message-custom__color: #000;
    @message-custom__background: #fc0;
    @message-custom__border-color: orange;

    @message-custom-link__color: blue;
    @message-custom-link__color-hover: darken(@message-custom-link__color, 20%);
    @message-custom-link__color-active: darken(@message-custom-link__color, 30%);

    @message-custom-icon: @icon-settings;
    @message-custom-icon__color-lateral: #000;
    @message-custom-icon__background: #green;
    @message-custom-icon__top: 15px;
    @message-custom-icon__right: false;
    @message-custom-icon__bottom: false;
    @message-custom-icon__left: 0;

    .example-message-4 {
        .lib-message-icon-lateral(custom, left);
        border-width: 4px;
        border-radius: 10px;
    }

# Messages global variables

                Mixin variable
                Default value
                Allowed values
                Comment

                @message__padding
                @indent__s @indent__base
                '' | value
                Message padding

                @message__margin
                @indent__xs 0
                '' | value
                Message margin

                @message__color
                false
                true | false
                Each message type has its own message color

                Messages font style

                @message__font-size
                13px
                '' | false | value
                Message font size

                @message__font-family
                false
                '' | false | value
                Message font family

                @message__font-style
                false
                '' | false | value
                Message font style

                @message__font-weight
                false
                '' | false | value
                Message font weight

                @message__line-height
                1.2em
                '' | false | value
                Message line height

                Message icon setup

                @message-icon__font-size
                ceil(@message__font-size * 2 + 2)
                '' | false | value
                Message icon font size

                @message-icon__font-line-height
                @message-icon__font-size
                '' | false | value
                Message icon line height

                @message-icon__inner-padding-left
                40px
                '' | false | value
                Message icon padding left

                @message-icon__lateral-width
                30px
                '' | false | value
                Message icon lateral width

                @message-icon__lateral-arrow-size
                5px
                '' | false | value
                Message icon arrow size

                @message-icon__top
                18px
                '' | false | value
                Message icon top position

                @message-icon__right
                false
                '' | false | value
                Message icon right position

                @message-icon__bottom
                false
                '' | false | value
                Message icon bottom position

                @message-icon__left
                0
                '' | false | value
                Message icon left position

                Message border

                @message__border-width
                false
                '' | false | value
                Message border width

                @message__border-color
                false
                '' | false | value
                Message border color

                @message__border-style
                false
                '' | false | value
                Message border style

                @message__border-radius
                false
                '' | false | value
                Message border radius

                Information message

                @message-info__color
                #6f4400
                '' | false | value
                Information message text color

                @message-info__background
                #fdf0d5
                '' | false | value
                Information message background

                @message-info-link__color
                @link__color
                '' | false | value
                Information message link color

                @message-info-link__color-hover
                @link__hover__color
                '' | false | value
                Information message hovered link color

                @message-info-link__color-active
                @link__hover__color
                '' | false | value
                Information message active link color

                @message-info__border-color
                @message__border-color
                '' | false | value
                Information message border color

                @message-info-icon
                @icon-warning
                '' | false | value
                Information message icon symbol code

                @message-info-icon__color-inner
                #c07600
                '' | false | value
                Information message icon symbol color

                @message-info-icon__color-lateral
                @color-white
                '' | false | value
                Information message lateral icon symbol color

                @message-info-icon__background
                #6f4400
                '' | false | value
                Information message icon background

                @message-info-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-info-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-info-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-info-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Warning message

                @message-warning__color
                @message-info__color
                '' | false | value
                Warning message text color

                @message-warning__background
                @message-info__background
                '' | false | value
                Warning message background

                @message-warning-link__color
                @message-info-link__color
                '' | false | value
                Warning message link color

                @message-warning-link__color-hover
                @message-info-link__color-hover
                '' | false | value
                Warning message hovered link color

                @message-warning-link__color-active
                @message-info-link__color-active
                '' | false | value
                Warning message active link color

                @message-info__border-color
                @message-info__border-color
                '' | false | value
                Warning message border color

                @message-warning-icon
                @message-info-icon
                '' | false | value
                Warning message icon symbol code

                @message-warning-icon__color-inner
                @message-info-icon__color-inner
                '' | false | value
                Warning message icon symbol color

                @message-warning-icon__color-lateral
                @message-info-icon__color-lateral
                '' | false | value
                Warning message lateral icon symbol color

                @message-warning-icon__background
                @message-info-icon__background
                '' | false | value
                Warning message icon background

                @message-warning-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-warning-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-warning-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-warning-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Error message

                @message-error__color
                @error__color
                '' | false | value
                Error message text color

                @message-error__background
                #fae5e5
                '' | false | value
                Error message background

                @message-error-link__color
                @link__color
                '' | false | value
                Error message link color

                @message-error-link__color-hover
                @link__hover__color
                '' | false | value
                Error message hovered link color

                @message-error-link__color-active
                @link__hover__color
                '' | false | value
                Error message active link color

                @message-error__border-color
                @message__border-color
                '' | false | value
                Error message border color

                @message-error-icon
                @icon-warning
                '' | false | value
                Error message icon symbol code

                @message-error-icon__color-inner
                #b30000
                '' | false | value
                Error message icon symbol color

                @message-error-icon__color-lateral
                @color-white
                '' | false | value
                Error message lateral icon symbol color

                @message-error-icon__background
                #b30000
                '' | false | value
                Error message icon background

                @message-error-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-error-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-error-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-error-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Success message

                @message-success__color
                #006400
                '' | false | value
                Success message text color

                @message-success__background
                #e5efe5
                '' | false | value
                Success message background

                @message-success-link__color
                @link__color
                '' | false | value
                Success message link color

                @message-success-link__color-hover
                @link__hover__color
                '' | false | value
                Success message hovered link color

                @message-success-link__color-active
                @link__hover__color
                '' | false | value
                Success message active link color

                @message-success__border-color
                @message__border-color
                '' | false | value
                Success message border color

                @message-success-icon
                @icon-checkmark
                '' | false | value
                Success message icon symbol code

                @message-success-icon__color-inner
                #006400
                '' | false | value
                Success message icon symbol color

                @message-success-icon__color-lateral
                @color-white
                '' | false | value
                Success message lateral icon symbol color

                @message-success-icon__background
                #006400
                '' | false | value
                Success message icon background

                @message-success-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-success-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-success-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-success-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position

                Notice message

                @message-notice__color
                @message-info__color
                '' | false | value
                Notice message text color

                @message-notice__background
                @message-info__background
                '' | false | value
                Notice message background

                @message-notice-link__color
                @message-info-link__color
                '' | false | value
                Notice message link color

                @message-notice-link__color-hover
                @message-info-link__color-hover
                '' | false | value
                Notice message hovered link color

                @message-notice-link__color-active
                @message-info-link__color-active
                '' | false | value
                Notice message active link color

                @message-notice__border-color
                @message-info__border-color
                '' | false | value
                Notice message border color

                @message-notice-icon
                @message-info-icon
                '' | false | value
                Notice message icon symbol code

                @message-notice-icon__color-inner
                @message-info-icon__color-inner
                '' | false | value
                Notice message icon symbol color

                @message-notice-icon__color-lateral
                @message-info-icon__color-lateral
                '' | false | value
                Notice message lateral icon symbol color

                @message-notice-icon__background
                @message-info-icon__background
                '' | false | value
                Notice message icon background

                @message-notice-icon__top
                @message-icon__top
                '' | false | value
                Message icon top position

                @message-notice-icon__right
                @message-icon__right
                '' | false | value
                Message icon right position

                @message-notice-icon__bottom
                @message-icon__bottom
                '' | false | value
                Message icon bottom position

                @message-notice-icon__left
                @message-icon__left
                '' | false | value
                Message icon left position