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.

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

Visuals

UI Kit

Examples

Informative

E.g. Blank select options These won’t be shown. Add select option text.

Cautionary

E.g. No select options Without select options, this question won’t be shown. Add an option.

Negative

E.g. Meaning changed We prevent significant changes to the meaning of questions in a live survey. To make this change, contact support.

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 to use and when not to use

When to use
  • Use an Inline Notification when you are speaking directly to a piece of content and the notification can be positioned close to the content.
  • Use an Inline Notification for highly contextual information.
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