Inline Message
Messages placed at the top of a page or section to inform the user of an important change.
- Overview
- Specs
- Guidelines
Component
An Inline Message is a user interface element designed to display short, contextual messages within the flow of a web page or application interface. These notifications are typically used to provide feedback, alerts, or status updates to users without disrupting their current tasks.
They are often displayed inline with the content or adjacent to relevant elements to provide immediate context and help user understanding.
A: Primary Variation
B. Secondary Variation
1. Icon
2: Title
3: Description
4: Right Adornment
Used for:
Real-time updates
When it is necessary to provide users with real-time updates or notifications without interrupting their current activity, Inline Message components can be useful.
Error handling
Inline Messages are effective for communicating errors or warnings within a specific context. Instead of showing a generic error message at the top of the page, Inline Messages can pinpoint exactly where the error occurred.
Contextual information
Inline Messages can deliver additional contextual information or tooltips to help users better understand certain elements or features within an interface.
Interactive elements
Inline Messages can contain interactive elements such as buttons or links, allowing users to take immediate actions without navigating away from the current context.
Don’t use for:
Overuse
Using inline messages excessively can clutter the interface and overwhelm users with unnecessary information. It’s important to strike a balance and only use Inline Messages when they add significant value.
Visual noise
Adding too many Inline Messages to an interface can create visual noise and make it difficult for users to focus on essential content or actions.
Ambiguity
Poorly designed or ambiguous Inline Messages can confuse users instead of providing clarity. Avoid using unclear Inline Messages, as they can lead to user frustration and errors.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated color variables;
- Updated iconography;
- Removed unnecessary variations;
