AI Components / Toast
Toast
Fixed-position notification stack with type-colored left accent, auto-dismiss progress bar, optional title, slide animations, queue management, and cg-button dismiss. Imperative: show(message, { type, title, duration }).
ai-display v0.3.0
Playground
Examples
All types (click)
<cg-stack direction="row" gap="sm" style="flex-wrap:wrap;"><cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('New data available.', {type:'info'})">Info</cg-button><cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('Model updated!', {type:'success'})">Success</cg-button><cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('Token budget at 80%.', {type:'warning', title:'Usage Alert'})">Warning</cg-button><cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('Rate limit exceeded.', {type:'error', title:'API Error'})">Error</cg-button><cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('Processing with Claude 3.5...', {type:'ai'})">AI</cg-button></cg-stack><ai-toast></ai-toast>With title
<cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('Deployed to production with 0 errors and 14 assets optimized.', {type:'success', title:'Deploy Complete', duration:8000})">Show titled toast</cg-button><ai-toast></ai-toast>Persistent
<cg-button variant="secondary" size="sm" onclick="this.closest('.ex-preview')?.querySelector('ai-toast')?.show('This stays until you dismiss it.', {type:'info', duration:0})">Show persistent</cg-button><ai-toast></ai-toast>Import
import { AiToast } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-toast';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
position | "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-right" | Screen position |
rounded | "none" | "sm" | "md" | "lg" | "lg" | Border radius variant |
maxQueue | number | 6 | Max visible toasts (oldest dismissed) |
Events
| Event | Detail | Description |
|---|---|---|
ai-toast-dismiss | {id, reason} | Toast dismissed (reason: user or auto) |