Message

Display global messages as feedback in response to user operations.

Examples

Basic

A basic example of an information message.

View Code

<Button type="primary" on:click="{info}">Display message</Button>

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

  const info = () => {
    message.info("This is a basic message");
  };
</script>

Status

System status can be communicated using success, warning, or error messages.

View Code

<Button on:click="{success}">Success</Button>
<Button on:click="{error}">Error</Button>
<Button on:click="{warning}">Warning</Button>

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

  const success = () => {
    message.success("This is a success message");
  };

  const error = () => {
    message.error("This is an error message");
  };

  const warning = () => {
    message.warning("This is a warning message");
  };
</script>

Custom Duration

Customize the message display duration by using the duration option. The default is 3000 (3 seconds).

The message will never dismiss if the duration is set to 0.

View Code

<Button type="primary" on:click="{success}">Customized display duration</Button>
<Button type="primary" on:click="{infinite}">Open never closing message</Button>

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

  const success = () => {
    message.success({
      content:
        "This is a prompt message for success, and it will disappear in 1 second",
      duration: 1000
    });
  };

  const infinite = () => {
    message.info({
      content: "This is a prompt that will never close",
      duration: 0
    });
  };
</script>

Loading Indicator

Display a global loading indicator, which can be dismissed asynchronously. The resolved value of the message call promise is a destroy function.

View Code

<Button type="primary" on:click="{loading}">Display a loading indicator</Button>

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

  const loading = async () => {
    const hideMessage = await message.loading({
      content: "Action in progress..",
      duration: 0
    });

    setTimeout(hideMessage, 2500);
  };
</script>

Promise Interface

message provides a promise interface for performing actions after it closes. This example will display a new message when the old message closes.

View Code

<Button type="primary" on:click="{startAction}">
  Display sequential messages
</Button>

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

  const startAction = () => {
    message
      .loading({ content: "Action in progress..", duration: 1500 })
      .then(() =>
        message.success({ content: "Loading finished", duration: 800 })
      )
      .then(() =>
        message.error({
          // we want the icon to be red
          content: "Loading finished is finished",
          duration: 1500,
          icon: FireFilled
        })
      );
  };
</script>

Updating a Message

A message can be updated by using a unique key.

View Code

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

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

  const key = "updatable";

  const openMessage = () => {
    message.loading({ content: "Loading...", key });
    setTimeout(() => {
      message.success({ content: "Loaded!", key, duration: 1000 });
    }, 1000);
  };
</script>

API

This component provides the following static methods:

message.success
message.error
message.info
message.warning
message.warn // alias of warning
message.loading

Each returns a promise that resolves when the message closes.

If no additional configuration is needed, a string can be passed as the argument and will render as the content of the message. Otherwise a config object should be passed.

Config Attributes

Property	Description	Type	Default
content	Content of the message	String	-
duration	Time (milliseconds) before auto-dismiss, don't dismiss if set to 0	Number	3000
icon	Custom icon	SvelteComponent	-
key	A unique identifier for the message	String\|Number	-

Global Configuration

A message.config method is also provided.

message.config({
  top: 100,
  duration: 2000,
  maxCount: 3,
  rtl: true,
});

Global Config Options

Property	Description	Type	Default
duration	Time before auto-dismiss, in milliseconds	Number	3000
maxCount	Max messages to show at one time, drop oldest if limit is exceeded	Number
top	Distance from top (pixels)	Number
top	Whether to enable RTL (Right to left) mode	Boolean	false