Shipfaster: UI Components

Inline Alert

An alert message element that presents timely information within content areas as close as possible to the thing that it's about.


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.

Inline alerts display both task-generated and system-generated messages and persist until they are dismissed by the user. All inline alerts use a color that corresponds with their message intent and can also be accompanied by an icon to reinforce the message intent.

When to use

  • Frequently used in conjunction with field-level messages for errors in forms or other input areas.
  • When you want to provide specific piece of information or feedback in a user's journey.


Anatomy of inline alert
  1. Label: Indicates what the alert is about in short. Also can be accompanied by a leading icon for visual support.
  2. Dismiss Icon: Optionally let users dismiss the alert.
  3. Description: More information on the context if you want to explain the alert in brief.
  4. Actions: Adds related actions the users can take.

Best Practices

  1. Place inline notifications near their related items.
  2. In forms, inline notifications can be placed either at the top or bottom.
  3. Keep the alert message under two lines.
  4. Do not cover other content with inline notifications.
  5. The alert width varies based on the context and page layout.
  6. Be descriptive and give users clear next steps that they can take.

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.