Generic selectors

Exact matches only

Search in title

Search in content

Post Type Selectors

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.

Inline Message Anatomy
Inline Message anatomy

A: Primary Variation

B. Secondary Variation

1. Icon

2: Title

3: Description

4: Right Adornment

Warning Inline Message

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.

Overuse of Inline Messages

Demo

Access the Figma file and inspect the element using Dev Mode.

demo-inlineMessage
Inline Message at Figma
Open Figma

Last Update

Old Inline Message
Old version of the Inline Message
Current Inline Message
Current version of the Inline Message
  • Updated color variables;
  • Updated iconography;
  • Removed unnecessary variations;

Related

Color

Colors infuse life and dynamism into interfaces, expressing emotions and setting the tone for communication …
Read More

Buttons

Buttons are used to perform an action. Their labels tell the user what will happen when they interact with them …
Read More

Variations

Inline Message
Inline Message

Primary

Info 
.info {
  background: var(--info-10);
  icon-left: var(info_circle, --info-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Success 
.success {
  background: var(--success-10);
  icon-left: var(check_circle, --success-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Warning 
.warning {
  background: var(--warning-10);
  icon-left: var(error_circle, --warning-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Error 
.error {
  background: var(--error-10);
  icon-left: var(error_circle, --error-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Insight 
.insight {
  background: var(--grey-1);
  accent-icon: var(Bar Chart);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}

Secondary

Info 
.info {
  background: var(--info-10);
  stroke: var(--info-100);
  icon-left: var(info_circle, --info-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Success 
.success {
  background: var(--success-10);
  stroke: var(--success-100);
  icon-left: var(check_circle, --success-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Warning 
.warning {
  background: var(--warning-10);
  stroke: var(--warning-100);
  icon-left: var(error_circle, --warning-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Error 
.error {
  background: var(--error-10);
  stroke: var(--error-100);
  icon-left: var(error_circle, --error-100);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}
Insight 
.insight {
  background: var(--grey-1);
  stroke: var(--theme-100);
  accent-icon: var(Bar Chart);
  title: var(--grey-8);
  description: var(--grey-8);
  close: var(--grey-7);
}

Size

Primary 
.primary {
  height: 78px;
  icon-left: 24px;
  close: 20px;
  title: var(--subtitle-2);
  description: var(--label-regular);
}
Secondary 
.secondary {
  height: 70px;
  icon-left: 24px;
  close: 20px;
  title: var(--subtitle-2);
  description: var(--label-regular);
}

Useful links

guidelines figma accent icon

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component
polygon-framework

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Each Inline Message should contain a button that directs the user to the related field. In the case of the same messages for different fields, only one inline message should be displayed, allowing the user to navigate between the different fields. The Inline Messages owns two variations, these being:

Primary: displayed above the page title, they contain generalized information about the content of the page. These messages are more visually prominent than the “Secondary” messages.

Secondary: displayed below the page title, they are directly related to a specific field in the form, grid or list. Together with the inline message, the corresponding fields are marked with the icon and/or color corresponding to the type of notification.

Warning Inline Message
Warning Secondary Inline Message

Dos & Dont’s

Do

A general alert message should appear informing the user that there is no company configured.

Don’t

Apply more than two Inline Messages in the same view.

Related

Usage of notification types within a product

Explore notification components, their role in user interfaces, and best practices for implementing effective, user-friendly notifications in your design …
Read More

Outline