Source: https://monarchui.dev/components/alert/

Components · Status and feedback

# Alert

Inline message about a page or section.

@rookcom/monarch-react

Component

## Tones

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

An inline message about the state of a page or section, with an optional title, body and actions.

### Use when

- Explaining a condition that affects the current view (sync paused, domain not verified).

### Avoid when

- Transient confirmation of an action: use Toast.
- Nothing to show yet: use EmptyState.
- A one-line note next to a field, row or card: use InlineNotice.
- A banner across the page or app (trial, maintenance, billing) or one the user can dismiss: use CalloutBanner.

## Design principles

- Silent by default: only alerts that appear in response to a user action set `live`.
- `assertive` only for errors that block progress.
- Each tone has a default icon; replace it with `icon` or pass `null` for none.

## API reference

```tsx
import { Alert } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Alert` | component | server-safe | `.mn-alert` |

All native `<div>` attributes pass through; an explicit `role` wins over the one derived from `live`.

Generated from the TypeScript declarations of `packages/react/src/components/feedback/alert`.

## Properties

### `Alert`

Inline message about the state of a page or section.

| Prop | Type | Description |
| --- | --- | --- |
| `actions` | `ReactNode` | Actions on the trailing edge, e.g. a Button or a dismiss IconButton. |
| `children` | `ReactNode` |  |
| `className` | `string` |  |
| `icon` | `ReactNode` | Replaces the default tone icon. Pass `null` for none. |
| `id` | `string` |  |
| `live` | `"polite" \| "assertive"` | Set when the alert appears in response to something the user did, so it is announced. `assertive` only for errors that block progress. |
| `title` | `ReactNode` |  |
| `tone` | `"danger" \| "success" \| "warning" \| "neutral" \| "info"` |  |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `tone` | `'neutral'``'info'``'success'``'warning'``'danger'` | Colour and default icon. Default `info`. Exposed as `data-tone`. |
| `live` | `'polite'``'assertive'` | `polite` sets role="status", `assertive` sets role="alert"; unset means no live role. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Static | – | No interactive states; actions keep their own. |

## Interaction behaviour

- None of its own. Buttons passed in `actions` render on the trailing edge.

## Keyboard support

Not interactive itself; focus moves to controls inside `actions`.

## Accessibility

Role

none, status (live="polite") or alert (live="assertive")

Accessible name

–

- The tone icon is `aria-hidden`; the title and body carry the message.
- A live role makes screen readers announce the alert when it appears.

## Responsive behaviour

- No breakpoints: the alert fills its container width.

## Theme support

- Each tone uses its subtle, strong and border tokens, so all themes apply.

## Do and don't

### Do

- Set `live` when the alert appears because of something the user did.
- Offer the fixing action in `actions`.

### Don't

- Do not make static page alerts live; they would be announced on every render.
- Do not use `assertive` for information that does not block the user.

## Related components

- [Toast](https://monarchui.dev/components/toast/): Transient feedback after an action.
- [CalloutBanner](https://monarchui.dev/components/callout-banner/): Page- or app-level banner (trial, maintenance, billing, scope), dismissible and optionally a landmark.
- [InlineNotice](https://monarchui.dev/components/inline-notice/): One line attached to a field, row or card; no body block. Use Alert when the message needs a title and a paragraph.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Announces only when `live` is set (status / alert).

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/feedback/alert`

## All example code

### Tones

```tsx
import { Alert, Button } from '@rookcom/monarch-react';

<Alert tone="info" title="Sync scheduled">
  Rook ID members refresh every 15 minutes.
</Alert>
<Alert tone="success" title="Saved" />
<Alert
  tone="warning"
  title="Domain not verified"
  actions={<Button size="sm">Verify</Button>}
/>
<Alert tone="danger" title="Payment failed" live="assertive">
  Update the card to keep the workspace active.
</Alert>
```