Notification

Display a notification message globally.

Examples

Basic

A basic example of a notification.

View Code

<Button type="primary" on:click="{openNotification}">
  Open the notification box
</Button>

<script>
  import { notification, Button, message } from "svant";

  const openNotification = () => {
    notification.open({
      message: "Notification Title",
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      onClick: () => {
        message.info("Notification Clicked!");
      }
    });
  };
</script>

Custom Duration

The duration can be used to specify how long the notification stays open. After the duration time elapses, the notification closes automatically. If not specified, the default duration is 4.5 seconds. If the duration is set to 0, the notification box will never close automatically.

View Code

<Button type="primary" on:click="{openTimed}">Will close in 1.5s</Button>
<Button type="primary" on:click="{openInfinite}">Never closing message</Button>

<script>
  import { Button, notification } from "svant";

  const openTimed = () => {
    notification.open({
      message: "Notification Title",
      description: "This is a notification that will disappear in 1.5 seconds",
      duration: 1500
    });
  };

  const openInfinite = () => {
    notification.open({
      message: "Notification Title",
      description: "This is a notification that will never close on it's own",
      duration: 0
    });
  };
</script>

Status Icon

A status icon can be included on the left side of the notification.

View Code

<Button on:click="{onSuccess}">Success</Button>
<Button on:click="{onInfo}">Info</Button>
<Button on:click="{onWarning}">Warning</Button>
<Button on:click="{onError}">Error</Button>

<script>
  import { Button, notification } from "svant";

  const defaultOptions = {
    message: "Notification Title",
    description:
      "This is the content of the notification. This is the content of the notification. This is the content of the notification."
  };

  function onSuccess() {
    notification.success(defaultOptions);
  }

  function onInfo() {
    notification.info(defaultOptions);
  }

  function onWarning() {
    notification.warning(defaultOptions);
  }

  function onError() {
    notification.error(defaultOptions);
  }
</script>

Custom Icon

A custom icon can also be added. Use the iconColor option to set it's color. Using status methods (notification.success) will color the icon according to the status color.

View Code

<Button type="primary" on:click="{openNotification}">
  Open the notification box
</Button>

<script>
  import { notification, Button, message } from "svant";
  import { SmileOutlined } from "svant/icons";

  const openNotification = () => {
    notification.open({
      message: "Notification Title",
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      icon: SmileOutlined,
      iconColor: "#108ee9"
    });
  };
</script>

Custom Button

A custom button can be added to the notification. It should include an object with the buttons props and a onClick function.

View Code

<Button type="primary" on:click="{openNotification}">
  Open the notification box
</Button>

<script>
  import { notification, Button, message } from "svant";

  const openNotification = () => {
    notification.open({
      message: "Notification Title",
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      key: "custom_key",
      onClose: () => {
        message.info("Notification closed");
      },
      button: {
        type: "primary",
        size: "small",
        text: "Confirm",
        onClick: () => {
          message.info("Close button clicked!");
          notification.close("custom_key");
        }
      }
    });
  };
</script>

Customized Styling

The Notification has options for style and className so it's style can be customized.

View Code

<Button type="primary" on:click="{openNotification}">
  Open styled notification box
</Button>

<script>
  import { notification, Button, message } from "svant";

  const openNotification = () => {
    notification.open({
      message: "Notification Title",
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      style: {
        marginLeft: 335 - 600
      },
      className: "test-notification-demo-class"
    });
  };
</script>

<style>
  :global("test-notification-demo-class") {
    width: 600px;
  }
</style>

Placement

A notification box can appear from the topRight, bottomRight, bottomLeft or topLeft of the viewport.

View Code

<Button type="primary" on:click="{() => openNotification('topLeft')}">
  <RadiusUpleftOutlined />
  topLeft
</Button>
<Button type="primary" on:click="{() => openNotification('topRight')}">
  <RadiusUprightOutlined />
  topRight
</Button>
<br />
<Button type="primary" on:click="{() => openNotification('bottomLeft')}">
  <RadiusBottomleftOutlined />
  bottomLeft
</Button>
<Button type="primary" on:click="{() => openNotification('bottomRight')}">
  <RadiusBottomrightOutlined />
  bottomRight
</Button>

<script>
  import { notification, Button } from "svant";
  import {
    RadiusUpleftOutlined,
    RadiusUprightOutlined,
    RadiusBottomleftOutlined,
    RadiusBottomrightOutlined
  } from "svant/icons";

  const openNotification = placement => {
    notification.info({
      message: `Notification ${placement}`,
      description:
        "This is the content of the notification. This is the content of the notification. This is the content of the notification.",
      placement
    });
  };
</script>

Updating a Notification

A notification can be updated by using a unique key.

View Code

<Button type="primary" on:click="{openNotification}">
  Open the notification box
</Button>

<script>
  import { notification, Button } from "svant";

  const key = "updatable";

  const openNotification = () => {
    notification.error({
      key,
      message: "Original Notification Title",
      description: "description."
    });
    setTimeout(() => {
      notification.success({
        key,
        message: "New Title",
        description: "New description.",
        duration: 3000
      });
    }, 1000);
  };
</script>

API

This component provides the following methods:

notification.open(options)
notification.success(options)
notification.error(options)
notification.info(options)
notification.warning(options)
notification.warn(options) // alias of warning
notification.close(key: String)
notification.destroyAll()

Notification Options

Property	Description	Type	Default
message	The title of notification box (required)	String
description	The text content of notification box (required)	String
className	Customized CSS class	String
duration	Time in milliseconds before Notification is closed. When set to 0 or null, it will never be closed automatically	Number
button	Object of Button props along with onClick and text options. Will add a button to the bottom of the notification	Object
icon	Customized icon	SvelteComponent
iconColor	Color for the customized icon	String (CSS color property)
closeIcon	Custom close icon	SvelteComponent
key	The unique identifier of the Notification	String
onClose	Specify a function that will be called when the close button is clicked	Function
onClick	Specify a function that will be called when the notification is clicked	Function
placement	Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight`	String	`topRight`
style	Customized inline style	Object\|String

Global Configuration

A notification.config method is also provided. These can be overridden on an individual basis.

notification.config({
  placement: 'bottomRight',
  bottom: 50,
  duration: 3000,
  rtl: true,
});

Global Config Options

Property	Description	Type	Default
bottom	Distance from the bottom of the viewport, when placement is bottomRight or bottomLeft (unit: pixels).	Number	24
top	Distance from the top of the viewport, when placement is topRight or topLeft (unit: pixels).	Number	24
closeIcon	Global close icon	SvelteComponent
duration	Time in milliseconds before Notification is closed. When set to 0 or null, it will never be closed automatically	Number
placement	Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight`	String	`topRight`
rtl	Whether to enable RTL mode	Boolean	false