Toast (Notification)

Renamed from Notification in Gravity 12.

The Toaster component provides a notification system using toast messages. It uses a provider to manage and display toast notifications with optional actions and icons.

You can show a notification from anywhere in your application using the ViewContext.

Preview

Usage

import { useContext } from 'react';
import { ViewContext, Button } from 'components/lib';

function MyComponent({ ...props }){

  const viewContext = useContext(ViewContext);
  
  return (
    <div>
      <Button 
        text='Show'
        action={ () => {
          viewContext.notification({ 
            title: 'Hello!', 
            description: 'I am a notification.' 
          });
        }}
      }/>
    </div>
  );
}

Parameters

Param	Description	Required	Value
description	toast description	optional	string
title	toast title	optional	string
variant	variant	optional	string (success/info/error)

Notes

• The Toaster component uses the useToast hook to manage the state of the toasts.

• The component relies on Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, and ToastViewport from ./toast.jsx.

• For more details, refer to the Shadcn Toast documentation.