Skip to content

← All components

Navigation and interaction

ToastViewport

Polite and assertive toast live region.

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

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

/**
 * Complete ToastViewport parameter reference.
 * @param label
 *   type: string | renderable content
 *   default: "Notifications"
 *   example: "Accessible label"
 * @param position
 *   type: "top-left" | "top-right" | "bottom-left" | "bottom-right"
 *   default: "bottom-right"
 *   example: "bottom-right"
 * @param closeLabel
 *   type: string
 *   default: "Dismiss notification" (React)
 *   example: "Accessible label"
 */
export function ToastViewportExample() {
  return (
    <ToastViewport />
  );
}

Svelte

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

  // Complete ToastViewport parameter reference.
  // label
  //   type: string | renderable content
  //   default: "Notifications"
  //   example: "Accessible label"
  // position
  //   type: "top-left" | "top-right" | "bottom-left" | "bottom-right"
  //   default: "bottom-right"
  //   example: "bottom-right"
  // closeLabel
  //   type: string
  //   default: "Dismiss notification" (React)
  //   example: "Accessible label"
</script>

<ToastViewport />

HTML

html
<!--
  Complete ToastViewport parameter reference.
  label
    type: string | renderable content
    default: "Notifications"
    example: "Accessible label"
  position
    type: "top-left" | "top-right" | "bottom-left" | "bottom-right"
    default: "bottom-right"
    example: "bottom-right"
  closeLabel
    type: string
    default: "Dismiss notification" (React)
    example: "Accessible label"
-->
<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>

Parameters

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

ParameterTypeDefaultAdaptersExampleDescription
labelstring | renderable content"Notifications"React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
position"top-left" | "top-right" | "bottom-left" | "bottom-right""bottom-right"React · Svelte · HTML"bottom-right"Viewport corner for transient notifications.
closeLabelstring"Dismiss notification" (React)React · Svelte · HTML"Accessible label"Accessible name for the dialog or toast close button.