Toast

Non-intrusive notification that appears temporarily on the screen to provide feedback or alert the user of an event.

Usage

Simple Usage

For simple usage, AutoToast can be used directly. It is a pre-assembled, simplified version of the Toast that handles common use cases.

import { AutoToast }from "@govtechmy/myds-react/toast";
 
// put the component high up the layout tree
<AutoToast />

// to publish or emit a new event to the Toast
import { useToast } from "@govtechmy/myds-react/hooks";
 
export default () => (
  const { toast } = useToast();
<button
  onClick={() => {
    toast({ variant: "message", 
    title: "Hello, world!", 
    description: "this is a message toast description" 
    });
  }}>
    Message
</button>
);

Advanced Usage

Instead of using AutoToast, the Toast component can be assembled manually for more control.

import {
ToastRoot, 
ToastIcon, 
ToastProgress, 
ToastProvider, 
ToastViewport, 
ToastTitle, 
ToastDescription 
} from "@govtechmy/myds-react/toast";
 
export default () => (
  <ToastProvider>
      {toasts.map((toast, index) => (
        <ToastRoot
          key={props.id || index}
          variant={toast.variant || "message"}
          {...props}
        >
          <ToastIcon />
          <div className="space-y-1">
            <ToastTitle>{toast.title}</ToastTitle>
            {toast.description && (
              <ToastDescription>{toast.description}</ToastDescription>
            )}
          </div>
          <ToastClose />
          <ToastProgress />
         </ToastRoot>
     ))}
 
      <ToastViewport />
    </ToastProvider>
);

// to publish or emit a new event to the Toast
import { useToast } from "@govtechmy/myds-react/hooks";
 
export default () => (
  const { toast } = useToast();
<button
  onClick={() => {
    toast({ variant: "message", 
    title: "Hello, world!", 
    description: "this is a message toast description" 
    });
  }}>
    Message
</button>
);

Examples

Variant

5 variants of toast are availablle: message, info, success, warning and error. The examples of use cases are:

success variant can be used to indicates a successful action such as creating a new request or submitting a form.
warning variant can alert the users to take notice, often used for reminders or actions that require attention, such as reporting spam.
information variant can provides additional details to keep user informed.
error variant can be used to notify the user of an error that requires resolution before proceeding.

Props

ToastProvider

ToastProvider is abstracted from Radix UI's ToastProvider. Please refer to the API references in this documentation.

ToastViewport

ToastViewport is abstracted from Radix UI's ToastViewport. Please refer to the API references in this documentation.

ToastRoot

ToastRoot is abstracted from Radix UI's ToastRoot. Please refer to the API references in this documentation.

Prop	Type	Default
`variant`	`enum`	`message`
`duration`	`number`	`5000`

MYDS