Alert

Tones

Sync scheduled

Rook ID members refresh every 15 minutes.

Saved

Domain not verified

Payment failed

Update the card to keep the workspace active.

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>

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

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.

Toast: Transient feedback after an action.
CalloutBanner: Page- or app-level banner (trial, maintenance, billing, scope), dismissible and optionally a landmark.
InlineNotice: 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