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.
- 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.
- 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.
Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.