Playground

import { createToaster } from '@devix-labs/toast';
import '@devix-labs/toast/styles.css';

createToaster({
  position: 'bottom-right',
  expand: false,
  closeButton: false,
  progress: false,
  newestFirst: false,
  duration: 4000,
  max: 3,
  gap: 14
});

import { Toaster, toast } from '@devix-labs/toast/react';
import '@devix-labs/toast/styles.css';

// Once, at the root of the app.
<Toaster
  position="bottom-right"
  duration={4000}
  max={3}
  gap={14}
/>

// Anywhere at all, including outside a component.
toast.success('Invoice sent');

<script setup>
import { Toaster, toast } from '@devix-labs/toast/vue';
import '@devix-labs/toast/styles.css';
</script>

<template>
  <Toaster
  position="bottom-right"
  :duration="4000"
  :max="3"
  :gap="14"
/>
  <button @click="toast.success('Invoice sent')">Send</button>
</template>

<script>
  import { toaster, toast } from '@devix-labs/toast/svelte';
  import '@devix-labs/toast/styles.css';
</script>

<div use:toaster={{
  position: 'bottom-right',
  expand: false,
  closeButton: false,
  progress: false,
  newestFirst: false,
  duration: 4000,
  max: 3,
  gap: 14
}} />
<button on:click={() => toast.success('Invoice sent')}>Send</button>