Component Card

Alert

Show persistent inline messaging for important system states.

Alert anatomy

When to Use

Validation failures that block form completion.
System warnings requiring attention before proceeding.
Informational notices tied to a specific page context.

When NOT to Use

Use alerts near the affected area so the message has direct context.

For quick, dismissible confirmations after success, use Toast.

Variants

Info alert

Warning alert

Error alert

Confused?

Use Alert for persistent inline messaging, and use Badge for short metadata labels.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Create inline alert banners for warning and error states with icon, message, and optional action link for recovery.

Pencil Prompt

Add alert components to a settings page for validation and outage messaging, keeping icon and text alignment clean.

Next Lesson

Progress Bar