Toast

The Toast component is a non-disruptive message that appears temporarily to provide feedback or information to users. Your app should be wrapped with the ToastsProvider component to use the toast in order to use the useToasts hook.

Basic Usage

import {
  ToastsProvider,
  useToasts,
  ThemeProvider,
} from "@carton-org/react-neumorphism";
import { useColorMode } from "@docusaurus/theme-common";

// Create a separate component that uses the toast
const ToastDemo = () => {
  const { createToast } = useToasts();
  const { colorMode } = useColorMode();

  return (
    <Button
      onClick={() => {
        createToast(
          {
            type: "info",
            title: "Hello",
            description: "This is a toast message",
          },
          {
            duration: 3000,
            position: "bottom-right",
            size: "md",
            isClosable: true,
            bordered: false,
          }
        );
      }}
    >
      Show Toast
    </Button>
  );
};

Live Example

Props

Toast Object

Name	Type	Description	Required	Default Value
type	"info" | "success" | "warning" | "error"	Type of toast message	No	"info"
title	string	Title of the toast	No	-
description	string	Description of the toast message	No	-

ToastConfig Object

Name	Type	Description	Required	Default Value
duration	number	Duration in milliseconds before auto-closing	No	3000
position	"bottom-right" | "bottom-left" | "bottom-center" | "top-right" | "top-left" | "top-center"	Position of the toast on screen	No	"bottom-right"
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the toast	No	"md"
isClosable	boolean	Whether the toast can be manually closed	No	false
bordered	boolean	Whether the toast has a border	No	false

Examples

Different Positions

Different Sizes

Bordered Toasts