Also known as:
BannerConfirmationAcknowledgementMessageAlert

Inline Notification

An inline notification is a message object that presents timely information within content areas as close as possible to the thing that it’s about.

Need to know

  • An inline notification is a message object that presents timely information within content areas as close as possible to the thing that it’s about.

Options

  • Modes:

    • Persistent
    • Dismissible
  • Lines:

    • Single-line: inline/adjacent heading and body
    • Multi-line: stacked heading and body

To keep in mind

  • Inline Notifications are used for contextual information, including positive feedback or confirmation about an action, warnings about possible issues or show-stopping errors.
  • They are used to provide context in close proximity to a piece of content.
  • Inline notifications can be system or user triggered.
  • Dismissible or persistent:
    • Use Persistent notifications when the information continues to be relevant after the message is shown, e.g. Defining the reporting size on an Insight report
    • Use Dismissible notifications when the information has been acknowledged and the message is no longer relevant, e.g. helpfully updating formatting for user input data.
  • Anatomy:
    • Heading: summarizes the message. This relates directly to the message. Do not use generic language such as “Success”, “Error”, etc.
    • Description: succinct description that is a standalone sentence (that is, it does not run on from the heading).
    • Call to action (optional): hyperlinks can be included to provide the user with a clear call to action.
  • What’s an autohide?
    • TODO: add details

When not to use

  • When a message applies at a system level or does not apply to a specific piece of content and it needs to alert all users, use Global Notifications
  • When you are notifying a user of an action they have taken, provide visual feedback with a Toast Notification.
  • When an action is user triggered and you need to inform the user, use a Confirmation Modal with relevant Mood, e.g. Informative Confirmation Modal

See also

  • Global Notification: A Global Notification is a message object used for system-level notifications that inform the user about system status such as logging in and background processes like data imports.
  • Toast Notification: Toasts appear in the top–right (or top–left in right-to-left languages). It is used immediately after a specific event such as a user action that does not relate to an object on the page. For example, confirmation of deleted items.

External Links