Toast

Notifications are a useful way to let the user know about brief information. With the Toast provider, you can manage the notifications.

Implementation

To start using the toast system, you need the ToastProvider and the useToast hook.

First, create a component to use the hook.

component.tsx
    
       
 import { Button, useToast } from "cloth-ui"; 
 
 const Component = () => { 

  const toast = useToast(); 
 

  return ( 

    <> 

      <Button 

        variant="secondaryAlt" 

        text="Default" 

        onClick={() => toast.open("This is a toast notification")} 

      /> 

      <Button 

        variant="secondaryAlt" 

        text="Success" 

        onClick={() => toast.open("Task completed successfully", "success")} 

      /> 

      <Button 

        variant="secondaryAlt" 

        text="Error" 

        onClick={() => toast.open("Task failed with an error", "error")} 

      /> 

    </> 

  ); 
 };

After you created your desired component, you can wrap it with the ToastProvider for it to work.

basic-component.tsx
    
       
 import { ToastProvider } from "cloth-ui"; 
 
 export const BasicComponent = () => { 

  return ( 

    <ToastProvider> 

      <Component /> 

    </ToastProvider> 

  ); 
 };