Toasts

tcmts.share.Toasts · #zfrjd6qs · term · runs anywhere

Where toasts show: the page's corner, each one dismissable.

import { toasts } from "#codebase/tcmts/share";
import { Button, Text, UNSTABLE_Toast, UNSTABLE_ToastContent, UNSTABLE_ToastRegion } from "react-aria-components";

export function Toasts() {
  return (
    <UNSTABLE_ToastRegion queue={toasts} className="toasts">
      {({ toast }) => (
        <UNSTABLE_Toast
          toast={toast}
          className={`toast${toast.content.tone ? ` ${toast.content.tone}` : ""}`}
        >
          <UNSTABLE_ToastContent className="toast-body">
            <Text slot="title" className="toast-title">
              {toast.content.title}
            </Text>
            {toast.content.description && (
              <Text slot="description" className="toast-desc">
                {toast.content.description}
              </Text>
            )}
          </UNSTABLE_ToastContent>
          <Button slot="close" className="toast-close" aria-label="Dismiss">
            ×
          </Button>
        </UNSTABLE_Toast>
      )}
    </UNSTABLE_ToastRegion>
  );
}

uses

used by