## Import

```jsx
import { BannerMessage } from "@cfa/react-core";
```

## Live Editor

```jsx
<BannerMessage>Banner Message content goes here.</BannerMessage>
```

## 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`.

```jsx
<BannerMessage
  onDismiss={() => {
    alert("Dismissed");
  }}
>
  Banner Message content goes here.
</BannerMessage>
```

### Alignment

Use `alignment="left"` to align the icon and message to the start of the banner. The default is `center`.

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
  <BannerMessage alignment="left">Left-aligned banner message.</BannerMessage>
  <BannerMessage>Center-aligned banner message.</BannerMessage>
</div>
```

### Severity

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

```jsx
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
  <BannerMessage severity="info">Banner Message content goes here.</BannerMessage>
  <BannerMessage severity="warning">Banner Message content goes here.</BannerMessage>
  <BannerMessage severity="error">Banner Message content goes here.</BannerMessage>
</div>
```

### Long content

```jsx
<BannerMessage>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos aperiam expedita quasi soluta qui!
  Atque, ipsum. Blanditiis iure sed ex excepturi saepe veniam, accusantium sint architecto magnam
  vitae dolorem tenetur ullam deleniti tempore molestias fugiat? Nihil, deserunt ea magni, quos ad
  perferendis necessitatibus aut minima quo corporis culpa nesciunt porro, ipsam velit!
</BannerMessage>
```

## Props

### BannerMessage

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children\* | `ReactNode` | - | The content of the Banner Message. |
| alignment | `"center" \ | "left"` | `center` | Determines the horizontal alignment of the banner content. |
| 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 | `"error" \ | "info" \ | "warning"` | `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. |