Toast

The Toast component is a notification message that appears for a short duration and then disappears. It supports different types to indicate success, failure, or warnings.

Installation

Ensure you have Framer Motion installed in your project:

npm install framer-motion

Usage

Basic Toast

App.tsx

import { Toast } from "napui-kit";

export default function BasicToast() {
  return (
    <Toast
      title="Success"
      description="Your action was successful!"
      type="Success"
    />
  );
}

Toast with Close Handler

App.tsx

import { useState } from "react";
import { Toast } from "napui-kit";

export default function ClosableToast() {
  const [showToast, setShowToast] = useState(true);

  return (
    <>
      {showToast && (
        <Toast
          title="Warning"
          description="This action may have consequences."
          type="Warning"
          onClose={() => setShowToast(false)}
        />
      )}
    </>
  );
}

Types

The Toast component supports different types:

Type	Description
Success	Indicates a successful operation
Failed	Indicates an error or failure
Warning	Displays a warning message

Props

Prop	Type	Description
title	string	Title of the toast message
description	string	Description or additional details
type	"Success" | "Failed" | "Warning"	Defines the toast style and color
className	string	Additional CSS classes
onClose	() => void	Callback function triggered when toast disappears