Components / Toaster

Toaster

Viewport-corner toast queue. The toaster element renders nothing on its own — push messages through its imperative `show({ title, description?, variant?, duration?, action? })` method. Auto-dismiss after `duration` ms (set 0 to require manual dismiss).

overlays v0.8.0

Playground

Examples

Live demo — click to push

Success

Error

Warning

Info

<div style="position:relative; min-height:280px; padding-bottom:80px;">
  <cg-stack direction="row" gap="sm" wrap>
    <cg-button data-variant="success" variant="primary">Success</cg-button>
    <cg-button data-variant="error" variant="primary" type="danger">Error</cg-button>
    <cg-button data-variant="warning" variant="secondary">Warning</cg-button>
    <cg-button data-variant="info" variant="tertiary">Info</cg-button>
    <cg-button data-variant="ai" variant="tertiary">AI</cg-button>
  </cg-stack>
  <cg-toaster position="bottom-right" style="position:absolute;"></cg-toaster>
</div>

Pre-stacked (duration: 0 — manual dismiss)

<div style="position:relative; min-height:280px;">
  <cg-toaster position="top-right" style="position:absolute;"></cg-toaster>
</div>

Import

import { CgToaster } from '@cognivo/components';

// Or tree-shake: import '@cognivo/components/cg-toaster';

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-center" \| "bottom-center"	"bottom-right"	Stack position
`max`	number	5	Max visible toasts

Events

Event	Detail	Description
`cg-toast-dismiss`	{id: string}	Toast dismissed (auto or manual)