Sticky alert

Sticky alerts take over the top of an interface to show general notifications for the product or system, not a specific task.


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 of sticky alert
  1. Alert Label: Informs the context of the alert message.
  2. Actions: Provides appropriate actions for the user to take after reading the alert label.
  3. 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.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.