Toast

A component for displaying a notification to the user.

See all the examples and details in the Storybook.

Usage

import { Toast } from "@samgl/graffiti-ui";

const MyToast = () => {
  return (
    <Toast
      title="You have a new message in your inbox"
      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut odio sit amet metus semper scelerisque ut fringilla turpis."
      buttons={[
        {
          text: "Cancel",
          onClick: () => {
            console.log("Cancel");
          },
        },
        {
          text: "Okay",
          isPrimary: true,
          onClick: () => {
            console.log("Okay");
          },
        },
      ]}
    />
  );
};

Props

Prop	Type	Default	Optional	Description
title	string		❌	The title of the toast.
description	string		✅	The description of the toast.
buttons	ToastProps[buttons]		✅	An array of buttons to display in the toast.
className	string		✅	The class name of the component, generally used when extending the component with a styled component.