IxDF Design System

“Notification” Component

Design: zeplin.

Notifications are used to display transitory messages in response to user action. For instance, it’s used to inform users that an action they just performed was successful. As opposed to a modal dialog, a notification typically doesn’t contain actions.

There are 2 types of notifications in hydrogen: inline and floating notifications:

Inline notifications are used in rare cases when a message has to be displayed at the site of the action. It’s used when the error message is not applicable to the entire page. For instance, when a course answer cannot be submitted, an inline error notification can be displayed at the question.

Floating notifications are used generally for page-wide messages, e.g. when a contact form has been successfully submitted. They float on top of the page rather than at the site of the action.

Floating Notifications

Usage

import {Notification} from 'modules/notification.js';

// Notification without title
Notification.error('You can only take 3 courses at the same time as a student member');

// Notification with title
Notification.error({
    message: 'You can only take 3 courses at the same time as a student member',
    title: 'Unable to enroll into course.',
});

Notification Options

  • Notification.success()
  • Notification.warning()
  • Notification.info()
  • Notification.error()

Parameters

  • message (required)
    string|object{title:string, message:string}

    Message to display.

  • container
    HTMLElement

    Container element for alert box.

    Default Value: document.body

  • onNotificationDisplayedCb
    function

    Callback calls after prepending alertMessage to the container.

Inline Notifications

Usage

flash()->success($message);
flash()->warning($message);
flash()->info($message);
flash()->error($message);