loom muslin

Toast

Declarative toast notification with auto-dismiss and a close button.

Previewlive — edit controls below

Invoice saved

INV-2041 is now in the books.

Content

Appearance

State

Basic

import { Toast } from "@loom/muslin-react";

<Toast title="Invoice saved" description="INV-2041 is now in the books." durationMs={4000} defaultOpen />

Auto-dismiss

durationMs closes it; hovering pauses the timer.

import { Toast } from "@loom/muslin-react";

const [saved, setInvoice saved] = useState(false);

<Button onClick={() => setInvoice saved(true)}>Save</Button>
<Toast
  title="Invoice saved"
  description="All changes are in the books."
  variant="success"
  open={saved}
  onOpenChange={setInvoice saved}
  durationMs={4000}
/>