Notification

figma:ready

react:ready

scss:ready

freemarker:ready

vue:ready

webComponent:ready

Accessibility

Don't forget to set role="status" in the notification when content has been updated with information about the user's application

Don't forget to set role="alert" in the notification when It's used to alert about a result of user action


<div class="mc-notification" role="alert">
  <div class="mc-notification__content">
    <!-- ... -->
  </div>
</div>

Always use a title attribute on the close button title="Close"


<div class="example">
  <div class="mc-notification mc-notification-closable">
    <div class="mc-notification__content">
      <!-- ... -->
    </div>
    <button
      type="button"
      class="mc-notification-closable__close"
      title="Close"
    ></button>
  </div>
</div>