Inline Alert

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


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.

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.