Skip to main contentSkip to site searchSkip to component search
Honeycomb

Notification

The notification provides feedback to the user. It informs about the status of an action the user has performed.

Toast notifications

<section class="flix-notification flix-notification--danger" role="alert" aria-live="assertive">
  <div class="flix-notification__content">
    This is an error!
    <p class="flix-text flix-space-flush-bottom">...with some details</p>
  </div>
  <button class="flix-notification__close">
    <span class="flix-sr-only">Close</span>
  </button>
</section>
<section class="flix-notification flix-notification--warning" role="alert" aria-live="polite">
  <div class="flix-notification__content">
    Oh, warning!
  </div>
  <button class="flix-notification__close">
    <span class="flix-sr-only">Close</span>
  </button>
</section>
<section class="flix-notification flix-notification--success" role="alert" aria-live="polite">
  <div class="flix-notification__content">
    Yay! Success!
  </div>
  <button class="flix-notification__close">
    <span class="flix-sr-only">Close</span>
  </button>
</section>
<section class="flix-notification" role="alert" aria-live="polite">
  <div class="flix-notification__content">
    Ok, this is neutral.
  </div>
  <button class="flix-notification__close">
    <span class="flix-sr-only">Close</span>
  </button>
</section>


<h4 class="flix-h4 flix-h4--section-header">Toast notifications</h4>
<div class="flix-form-row">
  <div class="flix-checkbox">
    <input type="checkbox" class="flix-checkbox__input" id="animated-notification-trigger" value="yes" data-toggle="js-toast-example" data-toggle-class="flix-hidden"/>
    <label class="flix-checkbox__label" for="animated-notification-trigger">Show toast notification</label>
  </div>
</div>


<div class="flix-notification-container flix-hidden js-toast-example">
  <section id="notification-toast" class="flix-notification flix-notification--toast" role="alert" aria-live="polite">
    <div class="flix-notification__content">
      Hello and Goodbye!
      <p class="flix-text flix-space-flush-bottom">Sneaky-peeky notification in action</p>
    </div>
    <button class="flix-notification__close" data-toggle="js-toast-example" data-toggle-class="flix-hidden">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>
</div>

Details

There are 3 types of notification boxes:

  • neutral (default state, no modifiers needed);
  • critical/error (flix-notification--danger modifier)
  • warning (flix-notification--warning modifier)
  • success (flix-notification--success modifier).

flix-notification__content element can hold some basic typography formatting, in order to get this working you can use flix-text, flix-list, flix-h# classes. See error notification example for more details.

It's important from a11y perspective to wrap close controls in a <button> element as in provided examples. This makes control accessible with keyboard navigation.

Using the <i class="flix-notification__close flix-icon flix-icon-close"></i> as closing control also works but is not recommended and will be deprecated in the next major.

Acessibility

The role="alert" is required to convey important and time-sensitive information to users. It should be added to the section element of the notification.

The aria-live attribute informs assistive technologies how it should react to changes in the notification depending on how critical is the information.

  • assertive only for error notifications to make them being presented right away
  • Other notifications should be polite

Fixed container and animated notifications

Wrapping your notifications into flix-notification-container element makes them positioned outside of your content flow (top of the screen on mobile, top-right on bigger screens).

Adding --toast modifier class to notification makes it slide-in and disappear (slide out) automatically after certain time (4s is an overall animation duration).

<div class="flix-notification-container flix-notification-container--fixed">
  <section class="flix-notification flix-notification--toast">
    <div class="flix-notification__content">
      Your animated notification text.
    </div>
  </section>
</div>

Other positioning options are also available, following modifier classes for container allow you customize notification positioning:

  • flix-notification-container--top-right for top/right positioning (default);
  • flix-notification-container--top-left for top/left positioning;
  • flix-notification-container--bottom-left for bottom/left positioning;
  • flix-notification-container--bottom-right for top/left positioning;

Note that notification is shown and hidden automatically with CSS animations.

As hidden notification elements remain in the DOM they might be blocking your content interaction, consider implementing your own javascript logic of clearing up notification elements from the container.

Made with 🍯 by FlixMobility 2022