Inline notifications are messages that appear near the content to which they are related. They may be task or system generated, communicating information such as significant status updates, alerts to success or failure of an action, or call attention to a new feature in which a user may be interested.

Consider using an inline notification when presenting:

• Feedback – Providing feedback to users about their actions. For example, if a user submits a form requiring server-side validation, an inline notification should be used to display and summarize form-level errors.
• Significant status updates – Delivering significant status updates about a task. For example, if a user initiated an asynchronous process such as a device update, a notification might provide the status update upon. "Success - all devices have updated to the latest version."
• Promotions – Calling a user's attention to such as new features, tips, best practices, or other announcements. Use these sparingly.

Inline notifications are quite flexible, however consider using the alternatives for the following scenarios:

• Low severity information – If communicating low severity information which does not need to persist or require the user's attention, consider using a toast notification.

• High attention information – Consider using global banner notification when communicating information which might result in loss of functionality or requires the user's attention and/or action. Examples might include a system outage, critical error, or expiring subscription or license. Global banner notifications are persistent and require user action to acknowledge or dismiss.

• Immediate feedback – When providing immediate feedback to a user's action, a variety of tools are likely more appropriate.

  • When a user is awaiting a response after clicking an action button, use the busy button which provides in-progress and success animations. If the response time exceeds expectations or the API call fails, then an inline notification is appropriate for providing status updates.
  • When validating form input client-side, use field-level form validation when possible. If validation results in a form-level error, using an inline notification is appropriate.

An inline notification consists of:

Inline notifications should be placed near the content to which they are related.

• If the notification is related to the entire page, it should be placed underneath the page header.
• If the notification is related to a specific element, section of content, or action, it should be placed above that element, section of content, or action.

Examples of inline notifications relating to a specific section of content:

• A notification indicating a new option or configuration is available would be appropriate to place at the top of the form.

Examples of inline notifications relating to an action element:

• A notification providing form-level validation should be placed above the submit button, between the last input and the submit button. See form validation example.
• An notification indicating a service has an available upgrade should be placed above the launch action for that service. See promotion example.

• Titles and messages should be brief and clear.
• Messages should generally be no longer than two lines.
• Longer messages should wrap on narrower screens; they should not be truncated.
• Anchor links may be used to provide additional information about the notification. The links should immediately follow the message and should be limited to no more than two links.

Notifications reassure users that they are moving towards their goal. They should be relevant, timely, and informative providing assurance that their intended actions have been completed successfully. Or, if there is an issue, they should provide clear direction on how to resolve the issue.

• Relevant – Notifications should be relevant to the user's current task.
• Timely – Deliver notifications in a timely manner and ensure they are kept up to date with current status.
• Informative – Messages shoud provide clear context and direction on how to resolve any issues. Follow the voice and tone guidelines for writing crisp and effective content.

• Never sticky and should scroll when there is other content.
• The width and resizing behavior of an inline notification should scale alongside related content. For example, when placed below the PageHeader, the inline notification should have the same width and responsive behavior as the PageHeader.
• Inline Notifications are not clickable. Instead use anchors to direct users to take further action or to view the issue in full detail.
• Do not place buttons within an inline notification.

Inline notifications may be used to display normal, warning, and critical information.

For example, a normal status might communicate a process is progressing without interruption, a warning status might communicate a resource is approaching a limit or threshold, and a critical status might communicate an action has failed.

An inline notification may be used to provide additional detail or context, offering a helpful hint or tip, or providing a link to additional information.

In this example, the page-level banner informs the user that an action is required on a set of resources and provides a way for the user to navigate to the affected section for more details. Click "View details" to see the section-level notification with additional information.

It is desirable for users to stay up-to-date on the latest version. Place the notification above the card action.

In this case, placing the upgrade notification above the launch action informs the user of an action they might want to take prior to launching the application.

An inline form validation appears above the form's footer, providing a summary of any errors and steps to resolve them.