AI Components / Alert Card
Alert Card
Priority alert card with urgency-colored border, deadline badge, cg-button action, dismiss animation, and Escape key support.
ai-workflow v0.3.0
Playground
Examples
All urgency levels
<cg-stack gap="sm"><ai-alert-card title="System Update" message="A new version is available with performance improvements." urgency="info" actionLabel="Update Now" deadline="Optional"></ai-alert-card><ai-alert-card title="High Memory Usage" message="Server memory at 87%. Consider scaling." urgency="warning" deadline="30m"></ai-alert-card><ai-alert-card title="Token Budget Exceeded" message="Context window is at 98% capacity." urgency="urgent" actionLabel="Truncate" deadline="2h remaining"></ai-alert-card><ai-alert-card title="Outage Detected" message="Primary API endpoint unreachable. 3 services affected." urgency="critical" actionLabel="View Status" deadline="NOW"></ai-alert-card></cg-stack>Info with deadline
<ai-alert-card title="Scheduled Maintenance" message="Database migration planned for tonight." urgency="info" deadline="8h" actionLabel="Details"></ai-alert-card>Non-dismissible critical
<ai-alert-card title="Security Alert" message="Unauthorized access attempt detected." urgency="critical" actionLabel="Review Logs" dismissible="false"></ai-alert-card>Import
import { AiAlertCard } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-alert-card';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Token Budget Exceeded" | Alert title |
message | string | "Context window is at 98% capacity." | Alert message body |
urgency | "info" | "warning" | "urgent" | "critical" | "urgent" | Urgency level (critical pulses) |
deadline | string | "2h remaining" | Deadline badge text |
actionLabel | string | "Truncate" | Action button text (renders cg-button) |
dismissible | boolean | true | Show dismiss button (Escape key support) |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-alert-action | {title, urgency} | Action button clicked |
ai-alert-dismiss | {title} | Alert dismissed (animated exit) |