Svelte Notify

Pro Component

The Svelte Notify is a beautiful, responsive, customisable, accessible replacement for Javascript’s popup boxes. This plugin helps to turn standard Svelte alerts into "growl" like notifications.
Keep reading our Svelte Notify examples and learn how to use this plugin.

Usage

<Notifications>
</Notifications>

Initialization

<script>
import { getContext } from "svelte";
import { getNotificationsContext } from "svelte-notifications";
const { addNotification } = getNotificationsContext();
</script>

Examples

<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-left',
      notifyClassNames: 'top left',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Top Left
</button>



<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-center',
      notifyClassNames: 'top center',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Top Center
</button>


<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-right',
      notifyClassNames: 'top right',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Top Right
</button>


<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'bottom-left',
      notifyClassNames: 'bottom left',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Bottom Left
</button>

<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'bottom-center',
      notifyClassNames: 'bottom center',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Bottom Center
</button>

<button
  class="btn btn-default"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'bottom-right',
      notifyClassNames: 'bottom right',
      icon: 'ni ni-bell-55',
      type: 'default',
      removeAfter: 4000
    });
  }}>
  Bottom Right
</button>

Colors

<button
  class="btn btn-info"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-right',
      notifyClassNames: 'top right',
      icon: 'ni ni-bell-55',
      type: 'info',
      removeAfter: 4000
    });
  }}>
  Info
</button>

<button
  class="btn btn-success"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-right',
      notifyClassNames: 'top right',
      icon: 'ni ni-bell-55',
      type: 'success',
      removeAfter: 4000
    });
  }}>
  Success
</button>

<button
  class="btn btn-warning"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-right',
      notifyClassNames: 'top right',
      icon: 'ni ni-bell-55',
      type: 'warning',
      removeAfter: 4000
    });
  }}>
  Warning
</button>

<button
  class="btn btn-danger"
  on:click={() => {
    addNotification({
      id: generateId(),
      text:
        'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
      position: 'top-right',
      notifyClassNames: 'top right',
      icon: 'ni ni-bell-55',
      type: 'danger',
      removeAfter: 4000
    });
  }}>
  Danger
</button>