BannerMessage

Guidelines React

Github Storybook Markdown Copy for LLM

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

Examples

Dismissible

Using the onDismiss prop, renders the “X” close IconButton in the right of the BannerMessage.

Severity

The severity prop changes the background color and icon of the BannerMessage. By default, the severity is set to info.

Long content

Props

Visit the Documentation Site for the full list of props.

BannerMessage

Name	Type	Default	Description
children	ReactNode	-	The content of the Banner Message.
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.
className	string	-	CSS class names to apply custom styling.
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" | "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.