Navigation and interaction

ToastProvider

Owns queued transient notification state.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { ToastProvider } from "@cofob/design-system-react";

/**
 * Complete ToastProvider parameter reference.
 * @param limit/defaultDuration
 *   type: number (React)
 *   default: 5 / 5000 (React)
 *   example: 5 / 5000
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 */
export function ToastProviderExample() {
  return (
    <ToastProvider><App /></ToastProvider>
  );
}

Svelte

<script lang="ts">
  import { ToastProvider } from "@cofob/design-system-svelte";

  // Complete ToastProvider parameter reference.
  // viewport/position
  //   type: boolean and viewport corner (Svelte)
  //   default: true / "bottom-right" (Svelte)
  //   example: true / "bottom-right"
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
</script>

<ToastProvider><App /></ToastProvider>

HTML

<!--
  Complete ToastProvider parameter reference.
  limit/defaultDuration
    type: number (React)
    default: 5 / 5000 (React)
    example: 5 / 5000
  viewport/position
    type: boolean and viewport corner (Svelte)
    default: true / "bottom-right" (Svelte)
    example: true / "bottom-right"
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
-->
<div class="cf-toast-viewport" data-cf-toast-viewport></div>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-toast-viewport`
Adapters	Native · React · Svelte
Primary props	limit/defaultDuration · viewport/position · children
Documented states	empty · queued · dismissed
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`limit/defaultDuration`	`number (React)`	`5 / 5000 (React)`	React · HTML	`5 / 5000`	React queue capacity and default auto-dismiss duration.
`viewport/position`	`boolean and viewport corner (Svelte)`	`true / "bottom-right" (Svelte)`	Svelte · HTML	`true / "bottom-right"`	Svelte provider-owned viewport visibility and placement.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.