Inline notice
v4.0
An inline notice is a contextual message tied to a single element, like a tile or row item, used for field-level guidance, reminders, or validation.
- CSS
- Marko
- React
A bolded title is optional. Title copy is specific and scannable, which quickly summarizes the purpose of the notice.
Lead with the most important information—what went wrong, what happened, or what users need to do. Don’t add long explanations or include multiple actions. Keep headlines contextual to the information or action related to the component you’re referencing.
Required. The body provides the context or detail users need to understand the notice and act on it, if needed.
For actionable notices, tell the user what to do next. Don't repeat nearby content.
Alert notices can include a dismiss button that removes the notice from the page layout. This is helpful for general or supplemental information provided by the notice.
Alert notices can include a dismiss button that removes the notice from the page layout. This is helpful for general or supplemental information provided by the notice.
Link buttons provide a clear next step for users to resolve or engage with the notice. Make the verbs in the title and button correspond, and tell users what will happen when they interact.
See Button text for more guidance.
All alert notices are semantic. The available options are information, attention, confirmation, warning, and neutral. Get writing tips, and view more details for each type on the alert notice overview page.
Inline notices appear on load as part of the page layout and are inset. Content shifts to fill the space when an inline notice is dismissed. Inline notices should always be dismissible or resolvable, not a permanent part of a design.
All text content will wrap if wider than the container. Avoid wrapping for titles and button titles where possible.
The button is always stacked below the content for inline notices. This applies to both small and large screens.
On small screens, inline notices are positioned next to the related elements, with the button placed below the main content.
On large screens, inline notices are positioned beside their related elements. If a button is included, it is placed below the main content. Unlike page and section notices, which can include a right-aligned button, inline notices do not have this option.
Do keep inline notices close to and focused on their target element.
Don’t use inline notices for sections, page-level content, or attention account information. Use a section or page notice notice instead.
Do keep body copy in regular weight to maintain enough visual separation from the action.
Don’t use bold weight for the body copy. The button becomes more difficult to discern from the main content.
Do show one inline notice at a time and replace it with the next priority inline notice after the user dismisses or addresses it.
Avoid stacking inline notices. Stacked inline notices can quickly become overwhelming.
