Components

Alert

Static, inline message. Five tones matching the status token families. For transient feedback use Toast.

When to useto surface persistent status inline — a block of context the operator needs to read before acting.

Import

import { Alert, AlertTitle, AlertDescription, AlertAction } from "@ravnhq/efni/alert"

Tones

Sync scheduled

Data will refresh at 04:00 UTC. No action needed.

Mission accepted

MB-4472 handed off to the operator queue.

Approaching payload limit

82% of daily capacity used. Consider spacing out further requests.

Operator away

Handoffs will queue until an operator returns.

Mission aborted

MB-4472 failed pre-flight checks. Review the operator log.

<Alert variant="info">
  <Icon icon={Info} />
  <AlertTitle>Sync scheduled</AlertTitle>
  <AlertDescription>Data will refresh at 04:00 UTC.</AlertDescription>
</Alert>

With action

Two operators offline

Coverage drops below threshold in 12 minutes.

<Alert variant="warning">
  <AlertTitle>Two operators offline</AlertTitle>
  <AlertDescription>Coverage drops below threshold in 12 minutes.</AlertDescription>
  <AlertAction><Button size="xs" variant="outline">Reassign</Button></AlertAction>
</Alert>

Title only

Connection restored.

Connection lost — retrying automatically.

Do & don't

Approaching payload limit

82% of daily capacity used.

Match the tone to the situation — warning for something the operator can still avoid.

Approaching payload limit

82% of daily capacity used.

Don't cry wolf — error tone should be reserved for something that has already gone wrong.

Guidelines

Lead with a title that summarises the state, then explain in the description.
Pair every tone with a matching icon so it reads without color.
Use info for neutral notices; use default when the message shouldn't compete with real status.

Don't

Don't stack more than one alert on the same view — pick the most important.
Don't use Alert for confirm-then-act flows — use Alert dialog.
Don't use Alert for transient feedback like save confirmations — use Toast.

Props

Prop	Type	Default	Description
`variant`	`"info" \| "success" \| "warning" \| "away" \| "error" \| "default" \| "destructive"`	`"info"`	Tone. `destructive` is an alias of error; `default` uses neutral card colors.
`…props`	`React.ComponentProps<"div">`	—	Everything Alert passes to the element it renders.