Inline Alert Design Component from Shipfaster UI Design Systems

Shipfaster: UI Components

Inline Alert

Overview

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

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.