Overview
Inline Alert
An alert message element that presents timely information within content areas as close as possible to the thing that it's about.
Overview
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
- Label: Indicates what the alert is about in short. Also can be accompanied by a leading icon for visual support.
- Dismiss Icon: Optionally let users dismiss the alert.
- Description: More information on the context if you want to explain the alert in brief.
- Actions: Adds related actions the users can take.
Best Practices
- Place inline notifications near their related items.
- In forms, inline notifications can be placed either at the top or bottom.
- Keep the alert message under two lines.
- Do not cover other content with inline notifications.
- The alert width varies based on the context and page layout.
- 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.
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.
Learn more