see in action -> Home for stoast
Svelte Toast UI is a versatile and customizable toast notification system for Svelte applications. It allows you to easily display informative messages to your users in a visually appealing and user-friendly way.
You can install Svelte Toast UI using your preferred package manager:
npm
npm i @svelte-kit/svelte-toast
pnpm
pnpm add @svelte-kit/svelte-toast
To get started with Svelte Toast UI, follow these simple steps:
Import the required components in your Svelte application:
<script>
import { Toast, toaster } from '@svelte-kit/svelte-toast';
</script>
Add the ToastContainer
component to your layout in your Svelte app's root file. Customize its appearance and position according to your preferences:
<Toast
position="top-center" // Position can be 'top', 'bottom', 'left', 'right', 'center', etc.
customClass="" // Add your custom tailwind classes for styling
/>
Use the toaster
object to trigger toast notifications in your app
<button on:click={() => toaster.success({ title: 'Success', content: 'Task completed!' })}>
Show Success Toast
</button>
Customize your toasts by setting properties like progressColor
in the toaster
functions. Customize the progress bar color as needed.
Tailwind css required for this component add this to your tailwind config file
./node_modules/@svelte-kit/**/*.{html,js,svelte,ts}
add this in content of the tailwind config file. important
Custom Type toast
toaster.show({ title: 'Success', content: 'Task completed!' , type:'error' , progressColor:"bg-blue-500" , duration:3000 })
Promise Toast
toaster.promise({ title: 'Promise Toast', content: new Promise((resolve) => { setTimeout(() => { resolve('Promise resolved!'); }, 3000); }), });
The Toast
component is used to create a container for displaying toast notifications. It offers dynamic positioning and transition options for toast notifications.
**should be placed in root of your project**
position
(optional): Position to display the toast container. Options include 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', and 'bottom-right'.customClass
(optional): Custom CSS classes to style the container.withProgress
(default = false) : set true to show the progress barclosable
(default = true) : set true to not show the close icon in toastmaxToast
(default = 3) : set the no of toast to showstacked
(default = true) : set stacked to falase , if you dont want the toasts stack on top of each otherposition
prop allows you to set the desired position of the toast container, which can be adjusted to 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', or 'bottom-right'.+layout.svelte
<script>
import {Toast} from '@svelte-kit/svelte-toast';
// Customize the position, styling, and transitions
let customPosition = 'top-center';
</script>
<button class="px-3 py-1 border bg-slate-50 text-slate-900 rounded-md" on:click={() =>toaster.success({title: 'Success',content: 'This is a success toast',progressColor: 'bg-green-500' , duration:3000 // in ms})}>
success
</button>
<Toast
position={customPosition}
/>
<Toast
position="top-center
maxToasts=3
let:data
customToast
>
<div class="w-80 py-2 text-center border bg-slate-50 border-gray-600 border-opacity-30 shadow-xl rounded-md">
<h1>{data.title}</h1>
<p>{data.content}</p>
</div>
</Toast>
This example demonstrates how to use the ToastContainer
component and customize its positioning, styling, and transitions to suit your needs.
contributions are welcomed