Status message

When to use this component

Use the status message to inform users, give feedback, give advice, help them or confirm an action or a status. Status messages are mostly used in the context of a form as a feedback mechanism, but they can also be used outside the context of forms.

How it works

There are three types of status messages:

  1. Normal (or default) status message
  2. Warning status message
  3. Error status message
  4. Success status message

Normal (or default) status message

A normal status message is used to provide general information or help to the user. The message should have enough information to help the user understand the message, the purpose of the message and to be clear, but should be as short as possible.

Warning status message

A warning status message is used to show a warning to the user. The message should be clear and helpful. Give the user constructive advice on how to prevent problems.

Error status message

An error status message is used to show an error to the user. The message should be clear and helpful. Give the user constructive advice on how to fix the problem. When used in the context of a form or a wizard, make it easy for users to correct the error by preserving as much of the content as possible.

Success status message

A success status message is used to provide information about an action or a status that is positive, a succes. The message should have enough information to help the user understand the message, the purpose of the message and to be clear, but should be as short as possible.

<div class="messages {{ modifier }}" role="alert" aria-atomic="true">
  {% if modifier == 'messages--status' %}
    <h2 class="visually-hidden">{{ 'Status' }}</h2>
  {% endif %}
  <i class="{{ icon }}" aria-hidden="true"></i>
  <p>{{ text }}</p>
</div>
<div class="messages messages--status" role="alert" aria-atomic="true">
    <h2 class="visually-hidden">Status</h2>
    <i class="icon-checkmark" aria-hidden="true"></i>
    <p>Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.</p>
</div>
{
  "text": "Aliquam ullamcorper vehicula leo. Mauris mattis egestas hendrerit. Sed vitae aliquet mauris. Morbi at erat sed mi mollis maximus at sit amet enim. Sed quis libero eu mauris eleifend accumsan vitae semper turpis. Vestibulum nisl ipsum, ullamcorper euismod ultrices nec, tempor sit amet urna. Pellentesque bibendum a mi commodo consectetur. Aliquam nec est tellus.",
  "modifier": "messages--status",
  "icon": "icon-checkmark"
}
  • Content:
    %messages,
    .messages {
      @include theme('color', 'color-tertiary--lighten-1', 'status-messages-color');
    
      $status-message-icon-size: 2.1rem;
      $status-message-icon-margin: 2.1rem;
    
      display: flex;
      position: relative;
      align-items: center;
      max-width: 40rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
      padding: 1.1rem 1.2rem 1.1rem 5rem;
      border-radius: border-radius('radius-1');
      font-size: .7rem;
      line-height: 1.43;
    
      i {
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 1.2rem;
        width: $status-message-icon-size;
        height: $status-message-icon-size;
        margin: auto;
        margin-right: $status-message-icon-margin;
        border-radius: 100%;
        background-color: color('white');
        font-size: 1.5rem;
        line-height: $status-message-icon-size;
        text-align: center;
      }
    
      &.messages--status {
        background-color: color('green', -4);
    
        i {
          color: color('green');
        }
      }
    
      &.messages--error {
        background-color: color('red', -4);
    
        i {
          color: color('red');
        }
      }
    
      &.messages--warning {
        background-color: color('orange', -4);
    
        i {
          color: color('red');
        }
      }
    
      p {
        margin: 0;
      }
    
      a {
        color: inherit;
      }
    }
    
  • URL: /components/raw/status-message/_status-message.scss
  • Filesystem Path: components/31-molecules/status-message/_status-message.scss
  • Size: 1.2 KB