Toast

Confirm a recent action without interrupting the current task. Use it for brief feedback; keep messages that require a decision in the page or a dialog.

Examples

Duration

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { useRef } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Toast, type ToastRef } from "@kongmy-dev/sapphire-ui/toast";

function ToastDuration() {
  const toast = useRef<ToastRef>(null);
  return (
    <>
      <Button
        onClick={() =>
          toast.current?.show('Copied to clipboard', 'success', 500)
        }
      >
        Show short notification
      </Button>
      <Toast ref={toast} />
    </>
  );
}

export default ToastDuration;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-toast-stage {
  position: static;
  flex-direction: column;
  align-items: flex-start;
}

.docs-toast-description {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

.docs-toast-description code {
  font: inherit;
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Statuses

JSX usage

Install this example’s dependencies, load the package stylesheet from Setup, and add Example CSS where shown. The snippet includes its local helpers.

bun add @kongmy-dev/sapphire-ui react react-dom

"use client";
import { useRef } from "react";
import { Button } from "@kongmy-dev/sapphire-ui/button";
import { Toast, type ToastRef, type ToastType } from "@kongmy-dev/sapphire-ui/toast";

function ToastStatuses() {
  const toast = useRef<ToastRef>(null);
  const success: ToastType = 'success';
  return (
    <div className="sp-cluster">
      <Button onClick={() => toast.current?.show('Changes saved', success)}>
        Show success
      </Button>
      <Button
        onClick={() => toast.current?.show('A new update is available', 'info')}
      >
        Show information
      </Button>
      <Button
        onClick={() =>
          toast.current?.show('Your session expires soon', 'warning')
        }
      >
        Show warning
      </Button>
      <Button
        onClick={() => toast.current?.show('Unable to save changes', 'error')}
      >
        Show error
      </Button>
      <Toast ref={toast} />
    </div>
  );
}

export default ToastStatuses;

Example CSS

Load these demo styles alongside the package stylesheet for the same layout and surfaces.

.docs-toast-stage {
  position: static;
  flex-direction: column;
  align-items: flex-start;
}

.docs-toast-description {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--muted-foreground);
}

.docs-toast-description code {
  font: inherit;
}

HTML markup

Initial rendered HTML only. React handlers and portalled content require the JSX example; static HTML does not reproduce those interactions.

Props

Generated from the current public TypeScript signatures, including composed behaviour props. “—” means no default is declared in the local signature; forwarded behaviour defaults are not inferred.

Toast component props
Prop	Type	Required	Local default
`ref`	`Ref<ToastRef> \| undefined`	No	—

ToastRef

Supporting type used by this API.

ToastRef component props
Prop	Type	Required	Local default
`show`	`(message: string, type?: ToastType, durationMs?: number) => void`	Yes	—

ToastType

Supporting type used by this API.

ToastType definition
Type
`"info" \| "success" \| "warning" \| "error"`

Setup

bun add @kongmy-dev/sapphire-ui react react-dom

For an app using package components throughout, load the full stylesheet once. Add this component import where you use it.

import "@kongmy-dev/sapphire-ui/sapphire.css";
import { Toast } from "@kongmy-dev/sapphire-ui/toast";

Mixing package and vendored components? Follow application setup.