MessageBlock

Guidelines React

Github Storybook Markdown Copy for LLM

Message Blocks display block level status-based messages as block level messages within an aplication.

Import

import { MessageBlock } from "@cfa/react-core";

Live Editor

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.

Props

Visit the Documentation Site for the full list of props.

MessageBlock.Root

Name	Type	Default	Description
aria-describedby	string	-	Identifies the element (or elements) that describes the object.
aria-details	string	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-label	string	-	Defines a string value that labels the current element.
aria-labelledby	string	-	Identifies the element (or elements) that labels the current element.
children	ReactNode	-	The content or child elements nested within this component.
className	string	-	CSS class names to apply custom styling.
iconOverride	ReactNode	-	Override the default icon with a custom one.
id	string	-	The unique identifier for the DOM element.
onDismiss	() => void	-	Adds a close button that accepts an event handler.
role	AriaRole	-	The ARIA role assigned to the element to improve accessibility. Example roles include "button", "navigation", "dialog", etc.
severity	"info" | "success" | "warning" | "error"	info	The severity of the Banner Message indicates which background color and icon is used.
style	CSSProperties	-	Inline styles specified as a React-compatible CSS properties object.

MessageBlock.Title