Text
Text is required for all alert banners. The message should be concise and, if applicable, describe the next step that a user can take.
Data Display
Banner
Alert banners show pressing and high-signal messages, such as system alerts. They're meant to be noticed and prompt users to take action.
Examples
Options
Semantic Variants
An alert banner always has a semantic meaning and uses semantic colors. Only neutral (gray), informative (blue), and negative (red) are available as options. "Information" and "alert" icons should be used to help those with color vision deficiency discern the banner tone.
Actionable
An alert banner ideally provides a way for a user to address an issue in-line with an action. It can have both an icon-only close button and a button with a contextual action to take. There should never be more than one button with a contextual action in an alert banner.
Dismissible
An alert banner can include an icon-only close button to dismiss it.
Behaviors
Text Overflow
When the text is too long for the available horizontal space, it wraps to form another line. In actionable alert banners, the button moves below the text prior to text wrapping.
Implementation
Example Name
Description and implementation notes
<p> code example </p>Information
Checklist
All interactive states
Includes all interactive states that are applicable (hover, down, focus, keyboard disabled).
All Color Schemes
Works properly across all color schemes (light, dark).
Accessible Contrast for Text
Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible Contrast for UI Components
Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Defined Options
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc).
Defined Behaviors
Includes guidelines for keyboard focus, layout(wrapping, truncation, overflow) animation, interactions etc.
Usage guidelines
Includes a list of dos and don'ts that highlight best practices and common mistakes.
Writing Guidelines
Includes content standards or usage guidelines for how to write or format in-product content for the component.
Internationalization Guidelines
Works properly across various locales and includes guidelines for bi-directionality (RTL).
Keyboard Interactions
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
Design Tokens
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
UI Kit
Includes a downloadable Figma file that shows multiple options, states, color themes, and platform scales.