Notifications

What can we help you with?

See a problem with the code? Need a new component? Have feedback? We'd love to hear it all! The success of the Bluemix Design System relies on great people like yourself. Fill out the form below to submit your issue to our GitHub repo.

A member of the Bluemix Design System's team will be in touch within 48 hours.

Thank you!

Your issue, , is now in the bluemix-components repo. Click the issue number to track the progress or make edits to your issue.

We will get back to you within 48 hours. Feel free to reach out to us on one of our slack channels if you have additional questions:

#bluemix-components
#bluemix-design-system

Notifications are messages that communicate information to the user.

Variations

Generic notifications

Generic notifications are passive and do not affect the user's workflow. Messages may include real-time updates to notify the user of system activities. For example, information about an app, service, or compute resource (starting, stopping, or reaching a threshold).

Title: 'App Name' is stopped

Subtitle: Your application was stopped.

Caption: 10:47 AM

Title: 'App Name' is stopped

Subtitle: Your application was stopped.

Caption: 10:47 AM

Title: 'App Name' is stopped

Subtitle: Your application was stopped.

Caption: 10:47 AM

Title: 'App Name' is stopped

Subtitle: Your application was stopped.

Caption: 10:47 AM

View full render

HTML

<div>
  <div class='bx--notification--error bx--notification--new' role='alert'>
    <div class='bx--notification__details'>
      <h3 class='bx--notification__title'>Title: 'App Name' is stopped</h3>
      <p class='bx--notification__subtitle'>Subtitle: Your application was stopped.</p>
      <p class='bx--notification__caption'>Caption: 10:47 AM</p>
    </div>
    <button class='bx--notification__close-button' type='button'>
      <svg class='bx--notification__icon' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification--info bx--notification--new' role='alert'>
    <div class='bx--notification__details'>
      <h3 class='bx--notification__title'>Title: 'App Name' is stopped</h3>
      <p class='bx--notification__subtitle'>Subtitle: Your application was stopped.</p>
      <p class='bx--notification__caption'>Caption: 10:47 AM</p>
    </div>
    <button class='bx--notification__close-button' type='button'>
      <svg class='bx--notification__icon' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification--success bx--notification--new' role='alert'>
    <div class='bx--notification__details'>
      <h3 class='bx--notification__title'>Title: 'App Name' is stopped</h3>
      <p class='bx--notification__subtitle'>Subtitle: Your application was stopped.</p>
      <p class='bx--notification__caption'>Caption: 10:47 AM</p>
    </div>
    <button class='bx--notification__close-button' type='button'>
      <svg class='bx--notification__icon' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification--warning bx--notification--new' role='alert'>
    <div class='bx--notification__details'>
      <h3 class='bx--notification__title'>Title: 'App Name' is stopped</h3>
      <p class='bx--notification__subtitle'>Subtitle: Your application was stopped.</p>
      <p class='bx--notification__caption'>Caption: 10:47 AM</p>
    </div>
    <button class='bx--notification__close-button' type='button'>
      <svg class='bx--notification__icon' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  </div>

Inline notifications

Inline notifications appear in-page and are context related.

Error Notification:

Here is a clear explaination of the warning

Informational Notification:

Here is the information or directions

Success Notification:

Here is a clear explaination. It drops to next line if the content is long enough

Warning Notification:

Here is a clear explaination. It drops to next line if the content is long enough

View full render

HTML

<div>
  <div class='bx--notification-inline--error' role='alert'>
    <div class='bx--notification-inline__details'>
        <svg class='bx--notification-inline__icon--left' aria-label='close'>
          <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#notifications--error'></use>
        </svg>
      <div class='bx--notification-inline__text'>
        <p class='bx--notification-inline__title'>Error Notification:</h3>
        <p class='bx--notification-inline__subtitle'>Here is a clear explaination of the warning</p>
      </div>
    </div>
    <button class='bx--notification-inline__close-button' type='button'>
      <svg class='bx--notification-inline__icon--right' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification-inline--info' role='alert'>
    <div class='bx--notification-inline__details'>
      <svg class='bx--notification-inline__icon--left' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#notifications--info'></use>
      </svg>
      <div class='bx--notification-inline__text'>
        <p class='bx--notification-inline__title'>Informational Notification:</p>
        <p class='bx--notification-inline__subtitle'>Here is the information
  or directions</p>
      </div>
    </div>
    <button class='bx--notification-inline__close-button' type='button'>
      <svg class='bx--notification-inline__icon--right' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification-inline--success' role='alert'>
    <div class='bx--notification-inline__details'>
      <svg class='bx--notification-inline__icon--left' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#notifications--success'></use>
      </svg>
      <div class='bx--notification-inline__text'>
        <p class='bx--notification-inline__title'>Success Notification: &nbsp;</p>
        <p class='bx--notification-inline__subtitle'>Here is a clear explaination. It drops to next line if the content is long enough</p>
      </div>
    </div>
    <button class='bx--notification-inline__close-button' type='button'>
      <svg class='bx--notification-inline__icon--right' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  
  <div class='bx--notification-inline--warning' role='alert'>
    <div class='bx--notification-inline__details'>
      <svg class='bx--notification-inline__icon--left' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#notifications--warning'></use>
      </svg>
      <div class='bx--notification-inline__text'>
        <p class='bx--notification-inline__title'>Warning Notification: &nbsp;</p>
        <p class='bx--notification-inline__subtitle'>Here is a clear explaination. It drops to next line if the content is long enough</p>
      </div>
    </div>
    <button class='bx--notification-inline__close-button' type='button'>
      <svg class='bx--notification-inline__icon--right' aria-label='close'>
        <use xlink:href='https://dev-console.stage1.ng.bluemix.net/api/v4/img/sprite.svg#common--close'></use>
      </svg>
    </button>
  </div>
  </div>

Structure

Basics

There are three types of notifications: inline, generic, and modal. Please refer to the Usage tab when determining notification type. The border color of a notification and its accompanying icon indicate the notification state. The left border of a notification should be 5px, while the remaining sides are 1px.

Notifications on desktop and tablet should not exceed two lines (including the notification title) Notifications on mobile should not exceed three lines (including the notification title).

Notifications | units in px / rem

Inline mobile notifications

One-line notification height

2.5

Two-line notification height

3.5

Three-line notification height

5.313

Padding around close icon

Notification icon height and width

Padding around notification state icon

Left notification border

Width: Varies based on content

Inline desktop and tablet notifications

One-line notification height

2.5

Two-line notification height

3.5

Padding between top and bottom of notification and text

0.75

Padding around close icon

Notification icon height and width

Padding around notification state icon

Left notification border

Width: Varies based on content

Generic notifications mobile, desktop, and tablet

Generic notifications | units in px / rem

Generic notifications internal padding | units in px / rem

Generic notifications external padding | units in px / rem

Generic notifications | units in px / rem

Generic notifications internal padding | units in px / rem

Generic notifications external padding | units in px / rem

Height

Width

270

16.875

Internal padding on right side

Internal padding on left side

Internal padding top to title

Internal padding subtitle to caption

Internal padding caption to bottom

0.5

Internal padding around 'x' icon

0.5

External padding between notifications

0.5

Modal Notifications

Please refer to the Modal section for additional guidelines on styling and using modals.

Modal notifications | units in px / rem

Close button height and width

0.625

Padding between buttons

Notification height & width: varies based on content and layout

States

There are four states for notifications: warning, informational, error, and success. The notification state is indicated by icon and border color. This rule applies to all three types of notifications (inline, generic, and modal).

Notifications states | units in px / rem

Warning notification

#efc100

$color__yellow-30

Informational notification

#7cc7ff

$color__blue-20

Error notification

#ff5050

$color__red-40

Success notification

#8cd211

$color__green-30

Warning notification

#efc100

$color__yellow-30

Informational notification

#5aaafa

$color__blue-30

Error notification

#e71d32

$color__red-50

Success notification

#5aa700

$color__green-40

Typography

Notification titles should be set in bold and title case with the first letter of each word capitalized. Notification titles should not exceed more than three words. Notification text should be set in sentence case with only the first word capitalized. All notification type should follow the typography font stack for sans-serif.

Title

0.875

Text

0.875

Title

Bold

700

Text

Normal

400

What can we help you with?

Thank you!

Variations

Generic notifications

Title: 'App Name' is stopped

Title: 'App Name' is stopped

Title: 'App Name' is stopped

Title: 'App Name' is stopped

Inline notifications

Format

Size

Title

Message

Dismissal

Color

Green 30: Success

Yellow 30: Warning

Red 40: Error

Blue 20: Informational

Icons

Placement

Generic notifications

Inline notifications

Structure

Basics

Inline mobile notifications

Inline desktop and tablet notifications

Generic notifications mobile, desktop, and tablet

Modal Notifications

States

Typography