Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Feedback Message

Feedback messages are used to provide action-based UI feedback, or communicate important account-related messages to the learner.

Feedback messages are categorized into three types based on the type of message they communicate:

Success: indicates that an action was successful or that there are no issues. Success messages are indicated by a tick icon.

.m-feedback-message__container{ tabindex: 0 }
  .m-feedback-message.m-feedback-message--success
    = icon_tag(:tick, 'm-feedback-message__icon')
    %p.m-feedback-message__text
      = I18n.t('email_address_change.update.success')

Notice: provides neutral FYI-type factual information related to a performed action. Notice messages don’t prevent learner from carrying on what they are doing. Notice messages are indicated by an info icon.

.m-feedback-message__container{ tabindex: 0 }
  .m-feedback-message.m-feedback-message--notice
    = icon_tag(:info, 'm-feedback-message__icon')
    %p.m-feedback-message__text
      = I18n.t('email_address_change.update.no_change', email: 'feedback@futurelearn.com')

Alert: Unlike notice messages, alert messages require learner’s urgent attention – they cannot proceed with their task, until the error is addressed. We typically display an additional inline alert icon, to provide more information to the learner.

.m-feedback-message__container{ tabindex: 0 }
  .m-feedback-message.m-feedback-message--alert
    = icon_tag(:alert, 'm-feedback-message__icon')
    %p.m-feedback-message__text
      = I18n.t('password_reset_tokens.update.failure')

A molecule partial is available to construct feedback messages, and can be passed a message either as a string, or as block content within the template:

= molecule('feedback-message', variant: 'success', content: { message: "You've changed your email address." })
= molecule('feedback-message', variant: ['alert', 'dismissable']) do
  Some content that might include
  %a{ href: 'http://example.com' } a link or other markup.

When writing copy for feedback messages use these guidelines.