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.

Critical alertAug 04, 07:05 PM

Unusual purchase at electronics retailer

We blocked this transaction while we wait for you to confirm.

$4,250.00

at Best Buy · Online

Location: Tokyo, JP (your phone is in São Paulo)
Device: New Windows PC, never seen before
Behavior: First overseas purchase in 2 years
Velocity: 3 attempts in 12 seconds

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.

Heads upAug 04, 07:00 PM

Sign-in from a new browser

Just letting you know - no action needed if this was you.

Browser: Firefox 123 on macOS
Location: São Paulo, BR

SuspiciousAug 04, 06:35 PM

Login attempt from a new device

Device: iPhone 15 Pro · Safari
Location: Rio de Janeiro, BR · 380 km from usual

Critical alertAug 04, 07:03 PM

Multiple failed PIN attempts on ATM

Location: ATM #4821 · São Paulo, BR
Attempts: 5 failed PINs in 90 seconds

Dismissible

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

Heads upAug 04, 07:05 PM

Statement is ready

Your February statement is available for download.

Signal shape

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

Props

Prop	Type	Default	Description
severity	"info" \| "warning" \| "critical"	"warning"	Drives color and ARIA politeness.
title	string	-	Headline. Required.
description	string	-	Optional secondary text.
detectedAt	Date	-	Time the system flagged the event.
locale	string	"en-US"	Locale for the timestamp + currency.
signals	AlertSignal[]	-	Detection signals - typically 2–4.
amount	{ value, currency }	-	Transaction amount; rendered prominently.
merchant	string	-	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).
confirmLabel	string	"It was me"	Override confirm button label.
reportLabel	string	"Report fraud"	Override report button label.
freezeLabel	string	"Freeze account"	Override freeze button label.
loading	boolean	false	Disables actions while a request is in-flight.
dismissible	boolean	false	Show an × in the header.
onDismiss	() => void	-	Called when the × is clicked.