## Import

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

## Live Editor

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

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

### 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. |
| 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.&#xA;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. |