Show Toast
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>