MessageBlock
Message Blocks display block level status-based messages as block level messages within an aplication.
Import
import { MessageBlock } from "@cfa/react-core";Live Editor
Guidelines
When to use
- MessageBlock is for a message tied to a field, form, or section, such as validation errors at the top of a form.
Do
- Use variant for severity: info, success, warning, or error.
- Keep copy short and actionable. Say what happened and what to do next, if anything.
- Keep error messages until people dismiss them or resolve the issue.
- Include a dismiss control. Leave it off when the message must stay visible until it is resolved.
Avoid
- Using MessageBlock for a transient acknowledgment. Use Toast.
- Using MessageBlock for a system or page-level message. Use BannerMessage.
- Stacking multiple MessageBlocks on one screen. Show the most important message.
Examples
Title
This example shows how to use the MessageBlock.Title component to apply a pre-styled Title element. This is an extension of the Heading component and has all the props associated with it.
Severity
Use the severity prop to set the severity of the message block. The default is info. The available options are: info, success, warning, error.
Dismissible
When using the onDismiss prop, the “close” IconButton will render in the top right.
Customized
The MessageBlock component’s Icon can be overriden using the iconOverride prop, which accepts a ReactNode, and the background color can be customized with the style prop or className prop.
Note: when customizing any Design System component, please first consult with your team’s design lead to ensure that the customization is in line with the Design System guidelines.