Toast Message
Below is the full output of the Inpu component across all variants and sizes.
“Its Important to install the packages & Dependencies to use can intall using
npm install zure-uiand also paste code maunallyFor both React & Next Js“
1. Variants
These define the intent and visual weight of the Input.
Preview
2. Example
Made an example for better understanding in which on click it pops the Toast Message
Important Note “I have used
tailwindcssyou can use normalCSS”
Preview
Toast Demo
Props
| Parameter | Type | Default | Description |
|---|---|---|---|
message | string | — | Text content shown inside the toast |
variant | "default" | "success" | "error" | "warning" | "info" | "default" | Controls the visual style of the toast |
Installation
You can
Integrate Zure UIBy 2 waysnpm install zure-uiOr byManually creating folder, files & paste the given code ItTotally depends on your workflow.
NPM
NPM
Step 1: Create a React App
Open your terminal and run the following command to create a new React app:
npx create-react-app my-appStep 2: Navigate to Your Project Directory
After creating your project, navigate to your project directory:
cd my-appStep 3: Install the Package
Run the following command in your project root to add the library as a dependency.
npm install zure-uiStep 4: Start Building
You can now import any component directly into your React files.
import { Toast } from 'zure-ui';
function App() {
return
<Toast />
<button onClick={() => toast("Default Toast")}>Default</button>
<button onClick={() => toast.success("Success Toast")}>Success</button>
<button onClick={() => toast.error("Error Toast")}>Error</button>
<button onClick={() => toast.warning("Warning Toast")}>Warning</button>
<button onClick={() => toast.info("Info Toast")}>Info</button>
}