Overview
Sticky alert
Sticky alerts take over the top of an interface to show general notifications for the product or system, not a specific task.
Overview
These alerts persist until they are dismissed by the user. These alerts can include a ghost button or link. Depending on the message, the user resolving a product or system issue (for example, updating necessary account information), may also dismiss the alert. Sticky alerts may also persist across multiple sessions.
When to use
- To highlight specific messages that require user's attention.
- To promote special offers for your product or service.
- When you want to make a site-wide announcement to the users.
Anatomy
- Alert Label:Â Informs the context of the alert message.
- Actions: Provides appropriate actions for the user to take after reading the alert label.
- Dismiss Icon: Allows the user to dismiss the alert.
Best Practices
- Decide on the priority of the banner based on the information you want to convey.
- Allowing users to dismiss the alert is better.
- Do not cover other content with an alerts notification.
- Place system-wide messages directly below the main header or navigation bar.
- Be descriptive, short and give users clear next steps.
- Only show one alert at a time.
Recommended resources
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more