Ajax UI
Sign inGet started
Components/Suspicious Activity Alert

Suspicious Activity Alert

Top-level alert for fraud-triage screens. Surfaces the event, the detection signals, and the three canonical actions: confirm it was the user, report fraud, or freeze the account. Renders as a live role="alert" region so screen readers announce it on mount.

Installation

npx ajaxui add suspicious-activity-alert

Severities

Three severities drive the color, the icon, and the ARIA live region politeness. critical uses aria-live="assertive"; warning and info use polite.

Dismissible

For informational alerts the user can dismiss. Pair dismissible with onDismiss.

Signal shape

interface AlertSignal {
  label: string         // "Location", "Device", "Behavior", "Velocity"
  value: string         // The detected value, written as a human phrase
  icon?: ReactNode
}

Props

PropTypeDefaultDescription
severity"info" | "warning" | "critical""warning"Drives color and ARIA politeness.
titlestring—Headline. Required.
descriptionstring—Optional secondary text.
detectedAtDate—Time the system flagged the event.
localestring"en-US"Locale for the timestamp + currency.
signalsAlertSignal[]—Detection signals — typically 2–4.
amount{ value, currency }—Transaction amount; rendered prominently.
merchantstring—Merchant or payee name.
onConfirm() => void—User confirms the activity is legitimate.
onReport() => void—User reports fraud — opens dispute flow.
onFreeze() => void—User freezes the account (escalation).
confirmLabelstring"It was me"Override confirm button label.
reportLabelstring"Report fraud"Override report button label.
freezeLabelstring"Freeze account"Override freeze button label.
loadingbooleanfalseDisables actions while a request is in-flight.
dismissiblebooleanfalseShow an × in the header.
onDismiss() => void—Called when the × is clicked.