Toast

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

ToastContainer

The ToastContainer makes it easy to include toasts in your app. Include the container in you __layout.svelte file, and then use the utility function showToast to add toasts to the page.

The container has no properties and will already show toasts at the top right of the screen.

showToast

The toast is used to notify a user that some action took place. It's shown above all content and will persist a page navigation.

The toasts can be dismissed by the user or will just gracefully fade away.

Because toast messages can be initiated from just about any page or component, Bubbles recommends adding the ToastContainer component on the __layout.svelte page, and adding new toasts using the showToast utility function.



Props


message string
The text that the user will see.

color string primary-light
The color toast that you want to show. By default, the toast is "error" color, but another good option is "success"

Toast Example

Select a toast color
Toast Message 
<script>
  //__layout.svelte
  //
  //import { ToastContainer } from "bubbles-ui";
  //
  //<ToastContainer />

  //index.svelte or whatever page you're on

  import { Form, showToast, validateInputs, getFormData } from "bubbles-ui";

  const toastExampleFormInputs = [
    {
      type: "radio",
      id: "toast_example_color",
      value: "success",
      label: "Select a toast color",
      options: [
        {
          label: "primary",
          value: "primary",
        },
        {
          label: "secondary",
          value: "secondary",
        },
        {
          label: "error",
          value: "error",
        },
        {
          label: "warning",
          value: "warning",
        },
        {
          label: "success",
          value: "success",
        },
        {
          label: "info",
          value: "info",
        },
        {
          label: "gray",
          value: "gray",
        },
        {
          label: "dark",
          value: "dark",
        },
      ],
    },
    {
      type: "text",
      id: "toast_example_message",
      label: "Toast Message",
      value: "Your settings were successfully updated!",
      error: "Add a message that is at least 3 characters",
      validation: "string|required|min:3",
      vob: true,
    },
    {
      type: "submit",
      label: "Show Toast",
      onsubmit: async (event) => {
        try {
          await validateInputs(toastExampleFormInputs);
          const data = await getFormData(toastExampleFormInputs);
          showToast(data.toast_example_message, data.toast_example_color);
        } catch (error) {
          showToast(error.message);
        }
      },
    },
  ];
</script>

<Form inputs={toastExampleFormInputs} />