SlimBanner conveys brief information related to a specific section of a page. The message can relay success, warning, error or general information. Since they are about a specific section of a page or surface, SlimBanner sits inside of a container, and not at the top of the page. For alerts that apply to the whole page, use Callout.
iconAccessibilityLabel requires a short, descriptive label for screen readers. This label should communicate the intent of the icon, such as "Success", “Error”, “Info” or “Warning”. They should also be localized.
Remember to localize
Neutral SlimBanners are intended for Pinner interfaces where Pins and Boards take precedent or where we want to limit the use of color in the design.
Info SlimBanners communicate helpful messages or guidance to users about a feature or section.
Success SlimBanners communicate confirmation regarding an action within a larger flow.
Warning SlimBanners communicate cautionary messages to users. The SlimBanner should provide clear guidance on how to correct an issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to.
Error SlimBanners inform users of problems that require immediate action to correct. Further actions on the page might be blocked if users don't correct the problems. The SlimBanner should also provide clear guidance on how to correct the issue and/or learn more about it. This is done via a link inside of the banner, or clear actions in the section that the banner refers to.
For dense interfaces and placement inline, next to blocks of text, set SlimBanner to its compact type: “infoBare”, “successBare”, “warningBare”, “errorBare”.
The SlimBanner message can be complemented with a helper Link.
Component quality checklist
Component is live in Figma, however may not be available for all platforms.
Component is available in code for web and mobile web.
Component is not currently available in code for iOS.
Component is not currently available in code for Android.
An Upsell is used to market new features or to encourage a user to try recommendations.
Callouts are used at the top-most level of a page to communicate highest-priority information that applies to the entire page or surface. Callouts can be dismissed and are also actionable.
Toast provides feedback shortly after a user interaction, like a confirmation that appears when a Pin has been saved. Unlike Upsells and SlimBanners, toasts overlay Page content. They also automatically disappear after a certain amount of time without being dismissed by the user.
Tooltip provides helpful information regarding an interactive UI element, typically an Iconbutton. It is displayed on hover of a UI element, and disappears on mouse out.