BannerMessage
Banner Messages provide updates on the background status of the application or system, which may or may not require a response. They appear inline at the top of the page and span the full width.
Import
import { BannerMessage } from "@cfa/react-core";Live Editor
Guidelines
When to use
- BannerMessage is for system or page-level messages people need to see before continuing, such as a service outage, a policy update, or an outcome that goes beyond the current task.
Do
- Place the banner at the top of the page.
- Use variant for severity: info, success, warning, or error.
- Keep copy short and actionable. Say what happened and what to do next, if anything.
- If there is an action, use it sparingly and put it to the right of the content.
- System status banners span the full viewport width. Section banners stay within the section max width.
- Include a dismiss control. Leave it off when the message is critical and must stay visible.
Avoid
- Using BannerMessage for a transient acknowledgment. Use Toast.
- Using BannerMessage for a message tied to a field, form, or section. Use MessageBlock.
- Showing more than one BannerMessage on a screen. Combine them into one banner.
Examples
Dismissible
Using the onDismiss prop, renders the “X” close IconButton in the right of the BannerMessage.
Alignment
Use alignment="left" to align the icon and message to the start of the banner. The default is center.
Severity
The severity prop changes the background color and icon of the BannerMessage. By default, the severity is set to info.