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;
