Banner
Highlighted notifications, displayed at the top of the interface, occupying the entire width of the page.
- Overview
- Specs
- Guidelines
Component
Banners occupy the top of a view to show notifications or information about the result of an operation. They can be persistent or displayed until they are dismissed by the user.
Banners can also include a link to perform an operation (e.g. file transfer) or navigate to another view.
A: Info Variation
B: Success Variation
C: Warning Variation
D: Error Variation
1: Content
2: Link.
Used for:
Announcements and alerts
Use Banners to announce important updates, promotions, or events to users. For example, notify users about system maintenance, new features, or upcoming events.
Critical information
Display urgent or critical information that requires immediate attention, such as system errors, security alerts, or service disruptions.
System status
Display Banners to communicate the current status of a system, service, or application, such as maintenance downtime, service disruptions, or performance issues.
Don’t use for:
Overuse
Avoid overwhelming users with excessive Banner notifications, as this can lead to Banner fatigue and desensitization. Reserve the Banners for really important information.
Non-Essential notifications
Refrain from using Banners for trivial or non-urgent messages that do not require immediate attention from the users. Consider using the regular notifications panel.
Redundant information
If the information conveyed by a Banner is already available or accessible through other means, such as within the application interface or through system notifications, don’t use Banners.
Demo
Access the Figma file and inspect the element using Dev Mode.
What’s New?
- Added Info variation;
- Updated color variables;
Variations
Info
.info {
background: var(--info-20);
text: var(--grey-8);
}Success
.success {
background: var(--success-20);
text: var(--grey-8);
}Warning
.warning {
background: var(--warning-20);
text: var(--grey-8);
}Error
.error {
background: var(--error-20);
text: var(--grey-8);
}Size
Unique Size
.uniqueSize {
height: 37px;
text: var(--subtitle-2);
link: var(--link-large);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Behavior
Positioning & Usage
Banners should always be placed at the top of the view they refer to, in order to maintain their hierarchical importance in the view.
The banner has four possible states: informative, success, warning and error.
You can add an action to each Banner. These are links in the text. Depending on the type of message to be presented to the user, you can define the Banner’s appearance.
Dos & Dont’s
When there are two Banners, they must be of different types;
Do not use more than two Banners;
Related
