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.

The function will take two properties, the message you want to display and the color of the toast.

Props

message string An error occurred
The messages you want the toast to display

color string error
The color of the message you want to show. For best results, use "success" and "error".

Returns

void
Does not return anything.

<script>
  import { validateInputs, showToast } from "bubbles-ui";

  const formInputs = [
    {
      type: "text",
      id: "name", //the id that will be shown if there is an error
      label: "Your Name",
      value: null,
      desc: "You'll be able to change this name later",
      error: "A name is required",
      validation: "string|required|min:3", //the validation requirements that will be run
      validate_on_blur: true,
      vob: true,
    },
    {
      type: "submit",
      label: "Submit Form",
      onsubmit: async (event) => {
        try {
          await validateInputs(toastExampleFormInputs);
        } catch (error) {
          showToast(error.message); //shows the toast message, defaults to an error
        }
      },
    },
  ];
</script>