Notification Component

Table of Contents

Usage

Before you can use the notification feature, you have to set up the NotificationProvider in your _layout.svelte file:

<script>
  import { NotificationProvider } from 'svelte-components'
</script>
<NotificationProvider duration={3000} position="bottom-right" />

You can set up the duration (in ms) and position globally.

Default Notification

<script>
  import { Button } from "$lib/components";
</script>

<Button
  on:click={() => {
    notification.add({
      title: "Successfully saved!",
      description: "This is an example for a notification.",
      type: "success",
    });
  }}>Click me!</Button
>

Clickable and Closable Notification

<script>
  import { Button } from "$lib/components";
</script>

<Button
  on:click={() => {
    notification.add({
      title: "NOOb warning!",
      description:
        "You don't know what you're doing! Click here to see how you can get started.",
      href: "/docs/overview/getting-started",
      type: "warning",
      closable: true,
    });
  }}>Click me!</Button
>