Alert

An inline notice on a soft tinted surface. It tells people about something that affects the page they are on — a failed sync, a trial ending, a successful payment.

StableSource

New version available

Reload the page to get the latest features.

<Alert title="New version available">
Reload the page to get the latest features.
</Alert>

Import

tsx

import { Alert } from "@merid/react";

Examples

Tones

Each tone brings its own tint, text colour and icon.

Heads up

Maintenance is scheduled for Sunday 02:00 UTC.

Payment received

Your invoice has been marked as paid.

Storage almost full

You have used 92% of your quota.

Sync failed

We could not reach the server. Check your connection.

<Alert tone="info" title="Heads up">Maintenance is scheduled for Sunday 02:00 UTC.</Alert>
<Alert tone="success" title="Payment received">Your invoice has been marked as paid.</Alert>
<Alert tone="warning" title="Storage almost full">You have used 92% of your quota.</Alert>
<Alert tone="danger" title="Sync failed">We could not reach the server. Check your connection.</Alert>

With an action

action is a trailing slot for a button or a dismiss IconButton. Dismissal is up to you: remove the alert from your state.

Trial ends in 3 days

Add a payment method to keep your workspace.

2 members are waiting for approval.

<Alert
tone="warning"
title="Trial ends in 3 days"
action={<IconButton size="sm" label="Dismiss" icon={<CloseIcon />} onClick={() => setOpen(false)} />}
>
Add a payment method to keep your workspace.
</Alert>

<Alert tone="info" action={<Button size="sm">Review</Button>}>
2 members are waiting for approval.
</Alert>

Without icon or live region

icon={null} hides the icon; any node replaces it. live="off" renders a plain note with no role.

Plain note without an icon or live region.

<Alert icon={null} live="off">
Plain note without an icon or live region.
</Alert>

API reference

Renders a div; the ref and other div attributes are forwarded (the native title attribute is replaced by the title prop).

Prop	Type	Default	Description
`tone`	`"info" \| "success" \| "warning" \| "danger"`	`"info"`	Colour tone and default icon.
`title`	`ReactNode`	–	Medium-weight first line.
`icon`	`ReactNode \| null`	–	Leading icon. Defaults to a tone glyph; null hides it.
`action`	`ReactNode`	–	Trailing slot, e.g. an action button or dismiss IconButton.
`live`	`"polite" \| "assertive" \| "off"`	–	Live-region behaviour. Defaults to polite for info/success and assertive for warning/danger.
`children`	`ReactNode`	–	Body text.

Styling

Hook	Values
`.mrd-alert`	Root
`.mrd-alert__icon`	Icon slot
`.mrd-alert__content`, `__title`, `__body`	Text column
`.mrd-alert__action`	Trailing action slot
`data-tone`	`info` · `success` · `warning` · `danger`

Component variables: --mrd-alert-bg and --mrd-alert-fg, set per tone to the matching -soft and -strong tokens.

css

.billing .mrd-alert[data-tone="info"] {
  --mrd-alert-bg: var(--mrd-tray);
  --mrd-alert-fg: var(--mrd-ink);
}

Accessibility

polite renders role="status", assertive renders role="alert". Live regions only announce content that changes after they mount, so render the alert when the event happens rather than toggling hidden.
Use live="off" for static notes present on page load, so screen readers do not interrupt.
The icon is decorative; the title and body carry the meaning, so do not rely on colour alone.

Guidelines

Say what happened and what to do next in one or two sentences: “Sync failed. Check your connection.”

Avoid

Stack several alerts at the top of a page, or use danger for anything that is not an error.

Use an Alert for messages tied to the current page that should stay visible.

Avoid

Use it for short-lived confirmations — those are a Toast.

Toast — transient notifications.
AlertDialog — confirmations that need an answer.
Badge — compact status labels.