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.

The 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 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.

Accessibility

Roles should be added to the section element of the notification:

  • status is used to provide an updated status of some kind;
  • alert is used to convey critical and time-sensitive information to users.

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.

There are 3 types of notification boxes:

Neutral

Default state, no modifiers needed);

Ok, this is neutral. 
<section class="flix-notification" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Ok, this is neutral.
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Critical/error

Use flix-notification--danger modifier:

<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">...with some details</p>
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Warning

Use flix-notification--warning modifier:

Oh, warning! 
<section class="flix-notification flix-notification--warning" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Oh, warning!
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Success

Use flix-notification--success modifier:

Yay! Success! 
<section class="flix-notification flix-notification--success" role="status" aria-live="polite">
  <div class="flix-notification__content">
    Yay! Success!
  </div>
  <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link">
    <span class="flix-sr-only">Close</span>
  </button>
</section>

Toast notifications

Wrapping your notifications into flix-notification-container element makes them positioned outside 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).


<button type="button" class="flix-btn flix-btn--primary" data-toggle="js-toast-example" data-toggle-class="flix-hidden" data-toggle-timeout="4600">
  Show toast notification
</button>


<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">Sneaky-peeky notification in action</p>
    </div>
    <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link" data-toggle="js-toast-example" data-toggle-class="flix-hidden">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>
</div>

Duration options

It is possible to control the duration of notification staying on the screen. For that you can use additional modifiers in combination with the flix-notification--toast modifier.


<button type="button" class="flix-btn flix-btn--primary" data-toggle="js-toast-delayed-example" data-toggle-class="flix-hidden" data-toggle-timeout="8600">
  Show delayed toast notification
</button>


<div class="flix-notification-container flix-hidden js-toast-delayed-example">
  <section id="notification-toast" class="flix-notification flix-notification--warning flix-notification--toast flix-notification--toast-delayed" role="alert" aria-live="polite">
    <div class="flix-notification__content">
      Hello and Goodbye!
      <p class="flix-text">Delayed notification in action</p>
    </div>
    <button class="flix-notification__close flix-btn flix-btn--square flix-btn--md flix-btn--link" data-toggle="js-toast-example" data-toggle-class="flix-hidden">
      <span class="flix-sr-only">Close</span>
    </button>
  </section>
</div>
flix-notification--toast without additional modifier
Notification appears for 4 seconds.
flix-notification--toast with flix-notification--toast-delayed
Notification appears for 8 seconds.
flix-notification--toast with flix-notification--toast-dismiss
Notification stays on the screen until dismissed.

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.

Position options

Other positioning options are also available, following modifier classes for container allow you to 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 bottom/right positioning.