# Alert

**When to use:** A persistent inline status message, used for form-level errors, page/section banners, empty-config warnings, and "here's what changed" notices. Unlike `Toast`, it isn't portaled or auto-dismissed, and it stays in the page's normal flow for as long as its consumer renders it. Use `Toast` instead for a transient, corner-anchored notification.

**Keywords:** warning box

**Import:** `import { Alert, ThemeColor } from '@ahrowe/ui'`

**Colours:** any `color`: a `ThemeColor` (default `Primary`) or any CSS colour, see [ThemeColor.md](ThemeColor.md). A `ThemeColor` also picks the icon: a bell for `Primary` and `Neutral`, then info, check, warning and cross. Any other colour shows `icon`, or the bell.

```tsx
import { Alert, ThemeColor } from '@ahrowe/ui';

// In the primary colour, the default
<Alert>Here is what changed since your last visit.</Alert>

// Semantic colours
<Alert color={ThemeColor.Info}>Here's something worth knowing.</Alert>
<Alert color={ThemeColor.Success}>Your changes were saved.</Alert>
<Alert color={ThemeColor.Warn}>Your storage is almost full.</Alert>
<Alert color={ThemeColor.Error}>Something went wrong. Please try again.</Alert>

// With a title
<Alert color={ThemeColor.Warn} title="Storage almost full">
  You've used 92% of your available space. Free up room or upgrade your plan.
</Alert>

// Dismissible: the consumer owns visibility. onClose is called on click,
// so stop rendering the Alert (or flip your own state) to actually hide it
const [visible, setVisible] = useState(true);
{visible && (
  <Alert
    color={ThemeColor.Info}
    title="New feature available"
    onClose={() => setVisible(false)}
  >
    Try out the new dashboard layout from your account settings.
  </Alert>
)}

// Without the leading icon
<Alert color={ThemeColor.Success} hideIcon>
  A minimal message with no leading icon.
</Alert>

// Custom icon, overriding the colour's own
import { faRocket } from '@fortawesome/free-solid-svg-icons';
<Alert color={ThemeColor.Info} icon={faRocket}>
  Shipping a new release tonight.
</Alert>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `title` | `ReactNode` | Optional bold heading above the description |
| `children` | `ReactNode` | The message body |
| `color` | `ColorValue` | A `ThemeColor` (default `Primary`) or any CSS colour; a `ThemeColor` also picks the icon |
| `icon` | `IconDefinition \| ReactElement` | Overrides the colour's icon — FontAwesome icon or any React element |
| `hideIcon` | `boolean` | Hide the leading icon entirely |
| `onClose` | `() => void` | Shows a close button and is called when it's clicked. `Alert` doesn't hide itself, so stop rendering it (or update your own state) in the handler |

**Global defaults:** adopts `ConfigProvider`, e.g. `defaultProps={{ Alert: { hideIcon: true } }}`. See [ConfigProvider.md](ConfigProvider.md).

**Slots:** `root` `icon` `content` `title` `description` `closeButton`

**Labels:** `dismiss` — the text this component renders of its own. Pass `labels` to override any of them, on the component or app-wide through `ConfigProvider`; they merge per key. Type: `AlertLabels`.

## Sizing

Every length in an alert is `em`, so the padding, the icon, the close button and the accent bar keep their ratios to the body copy at any base font.

## Migration from `AlertStyleType`

Before 0.43 an Alert's colour was `styleType`, typed `AlertStyleType`. It is now `color`, typed
`ColorValue`, and `AlertStyleType` is gone, so TypeScript points at every use:

| Before | After |
|--------|-------|
| `styleType={AlertStyleType.Default}` | nothing: `Primary` is the default, with the same bell |
| `styleType={AlertStyleType.Info}` (and `Success`, `Warn`, `Error`) | `color={ThemeColor.Info}` |