Toast

Toast notifications are brief, non-intrusive alerts that provide feedback to users about the status of an action or display messages that require minimal user interaction. They typically appear in a corner of the interface and disappear automatically after a short duration.

+layout.svelte

<script>
	import Toasts from '@grampro/svelte-block/Toasts.svelte';
	import './app.css';
</script>

<Toasts />
<div class="flex flex-col">
	<slot />
</div>Copy

+page.svelte

<script lang="ts">import { addToast } from "@grampro/svelte-block/addToast";
import { Button } from "@grampro/svelte-block";
let toastSettings = {
  message: "Anakkin: I kill em!",
  type: "success",
  dismissible: false,
  timeout: 2e3,
  position: "top-center"
};
</script>

<Button on:click={() => addToast(toastSettings)}>Click To Show Toast</Button>
Copy

Sample

<script lang="ts">import { addToast } from "@grampro/svelte-block/addToast";
import { Button } from "@grampro/svelte-block";
let toastSettings = {
  message: "Your Phone Linging!",
  type: "success",
  dismissible: false,
  timeout: 2e3,
  position: "top-center"
};
</script>

<div class="flex gap-2">
  <Button on:click={() => addToast(toastSettings)}
    >Click To Show Success Toast</Button
  >
  <Button on:click={() => addToast({ ...toastSettings, type: "error" })}
    >Click To Show Error Toast</Button
  >
  <Button on:click={() => addToast({ ...toastSettings, type: "info" })}
    >Click To Show Info Toast</Button
  >
</div>Copy

Options

Specifying Toast Position(Beta)

You can specify Toast position as below.

<script>
	import { Toasts } from '@grampro/svelte-block';
	import './app.css';
</script>

<Toasts position="top-0 left-0" />
<div class="flex flex-col">
	<slot />
</div>Copy

Passing Custom Component(Beta)

<script>
	import { addToast } from '@grampro/svelte-block/addToast';
	import Action from '$lib/template/Action.svelte';

  let toastSettings = {
		type: 'custom',
		dismissible: false,
		timeout: 3000,
		component: Action
	};
</script>

<Button class="bg-blue-900 rounded-none" on:click={() => addToast(toastSettings)}>Show Preview</Button>Copy