# Core/Alert - Usage

Alerts are used to communicate important information to the user.

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `layout` | `(typeof layouts)[number]` | No | 'section' | The layout of the alert.<br><br>@default 'section'<br><br><ul><br>  <li>'section' - The alert is displayed in a full width container.</li><br>  <li>'compact' - @deprecated Use 'section' instead. Will be removed in a future version.</li><br>  <li>'inline' - Inline notifications are low-priority messages about a single element, like a tile or row item.</li><br></ul> |
| `appearance` | `(typeof appearances)[number]` | No | 'info' | The appearance of the alert.<br><br>@default 'info'<br><br><ul><br>  <li>'info' - Informational alerts provide general information or an important property.</li><br>  <li>'warning' - Warning alerts notify users of cautionary information.</li><br>  <li>'danger' - Danger alerts indicate problems that must be resolved.</li><br>  <li>'success' - Success alerts confirm an action has been completed.</li><br></ul> |
| `title` | `string` | No | `--` | The title of the alert. This is optional. |
| `children` | `React.ReactNode` | Yes | `--` | The description of the alert. This is required.<br><br>@required |
| `action` | `{     label: string;     onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;   } \| React.ReactElement` | No | `--` | The configuration of the action button. The object must contain a label displayed on the button and an onClick callback function. This is optional.<br><br>When the object is not provided, the alert will not render the action button. |
| `onDismiss` | `true \| (() => void)` | No | `--` | Optional function to call when the user dismisses the alert.<br><br>If this is not provided, the alert will not render the dismiss button.<br><br>Alerts with `appearance="danger"` cannot be dismissed and will not render the dismiss button.<br><br>**Integration note:** while the `Alert` will handle its own dismissal, this is non-persistent.<br>Persistent dismissal should be handled by the parent component. |
| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |