Shipfaster: UI Components

Sticky Alert

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


Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

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

  1. Decide on the priority of the banner based on the information you want to convey.
  2. Allowing users to dismiss the alert is better.
  3. Do not cover other content with an alerts notification.
  4. Place system-wide messages directly below the main header or navigation bar.
  5. Be descriptive, short and give users clear next steps.
  6. 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.

All Products

Outline: Figma’s Ultimate Wireframe Kit

Stay on top of testing ideas and prototypes with a wireframe kit that simplifies your process

Pricing Icon
800+ of Downloads
Review Stars
800+ downloads
Learn More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.