SlimBanner

View source on GitHub

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.

Props

Component props
Name
Type
Default
message
Required
string
-

Main content of SlimBanner. Content should be localized.

{| accessibilityLabel: string, href: string, onClick: ({| event: SyntheticMouseEvent<HTMLAnchorElement> | SyntheticKeyboardEvent<HTMLAnchorElement>, dangerouslyDisableOnNavigation: () => void, |}) => void, target?: null | "self" | "blank", text: string, |}
-

Helper Link to be placed after the message. See the helperLink variant to learn more.

iconAccessibilityLabel
string
-

Label to describe the status icon’s purpose. See the Accessibility guidelines for details on proper usage.

type
"neutral" | "error" | "info" | "warning" | "success" | "errorBare" | "infoBare" | "warningBare" | "successBare"
"neutral"

The type of SlimBanner. See the variants to learn more.

Usage guidelines

When to use
  • When displaying section-level information to the user.
  • When providing persistent messaging/guidance for specific elements or areas within a surface or page.
  • When providing messaging/guidance on information-dense screens where there is limited space.
When not to use
  • When displaying information that pertains to the whole page and is of the highest priority. Use Callout instead.
  • When interacting with the SlimBanner is required for the user to proceed with a task or flow. Use Modal instead.
  • When describing the function of an interactive element that doesn’t have a text label. Use Tooltip instead.
  • When calling a users attention to a feature for the first time. Use Popover instead.

Best practices

Do

Use for messages generated by the system that stay persistent on a surface

Don't

Use for messages generated as an immediate response to user interaction. Instead, use [Toast]/toast) for ephemeral messages, and Modal for a message that remains on the screen until it’s dismissed by a user.

Do

Place SlimBanner near elements of a section that it most relates to

Don't

Place SlimBanner at the top of a page and use them for highest-priority messaging. Use Callout instead

Do

Use "bare" SlimBanners for dense interfaces where space is an issue.

Don't

Use a regular SlimBanner with a background for dense interfaces where space is an issue.

Do

Strive for using one SlimBanner per section instead of stacking. If SlimBanner must stack, errors and warnings take precedence.

Don't

Combine SlimBanners with other components like Callouts or Upsells.

Accessibility

Labels

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.

Localization

Remember to localize message, helperLink and iconAccessibilityLabel.

Variants

Neutral

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

Info SlimBanners communicate helpful messages or guidance to users about a feature or section.

Success

Success SlimBanners communicate confirmation regarding an action within a larger flow.

Warning

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

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.

Compact

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.

Writing

Do
  • Use succinct and scannable language that clearly conveys information to the user without being overly clever or technical
  • Consider internationalization and how other languages may be constrained
Don't
  • Write messages that are wordy and take up a lot of space
  • For warnings and errors, exclamation points if the tone isn’t celebratory, for example: “Update your account!”

Upsell
An Upsell is used to market new features or to encourage a user to try recommendations.

Callout
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
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
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.

Edit page on GitHub