Toasts

Default Toast

<div class="toast">
	<span class="toast-icon">
		<i class="bi bi-bell-fill"></i>
	</span>
	<p class="toast-text text-l">
		Default toast
	</p>
</div>

Styles

Primary

<div class="toast toast-primary">
	<span class="toast-icon">
		<i class="bi bi-chat-left-fill"></i>
	</span>
	<p class="toast-text text-l">
		Primary toast
	</p>
</div>

Accent

<div class="toast toast-accent">
	<span class="toast-icon">
		<i class="bi bi-chat-left-fill"></i>
	</span>
	<p class="toast-text text-l">
		Accent toast
	</p>
</div>

Information

<div class="toast toast-info">
	<span class="toast-icon">
		<i class="bi bi-info-circle-fill"></i>
	</span>
	<p class="toast-text text-l">
		Information toast
	</p>
</div>

Success

<div class="toast toast-success">
	<span class="toast-icon">
		<i class="bi bi-check-circle-fill"></i>
	</span>
	<p class="toast-text text-l">
		Success toast
	</p>
</div>

Warning

<div class="toast toast-warning">
	<span class="toast-icon">
		<i class="bi bi-exclamation-triangle-fill"></i>
	</span>
	<p class="toast-text text-l">
		Warning toast
	</p>
</div>

Error

<div class="toast toast-error">
	<span class="toast-icon">
		<i class="bi bi-exclamation-circle-fill"></i>
	</span>
	<p class="toast-text text-l">
		Error toast
	</p>
</div>

Toast style examples

Positioning

Use toast-left-top, toast-left-bottom, toast-right-top and toast-right-bottom to position the toast components.

Animation

If you want to animate the toast component you have to install the Neptune Animations library.

Example

index.html

<div class="toast toast-primary toast-right-bottom" id="myToast">
	<span class="toast-icon">
		<i class="bi bi-chat-left-fill"></i>
	</span>
	<p class="toast-text text-l">
		Primary toast
	</p>
</div>

Then you create the component as usual and give it an animation class.

// Get the element you want to animate
const myToast= document.getElementById("myToast");

// Create a new animation instance und start the animation
const enterWebsite= new NeptuneAnimate(myToast, "nep-fade-in-up");
enterWebsite.startAnimation();

Now you have an animation for your toast component to enter the website. But it should also leave the website again. For this you set a timeout and then call up an animation that makes the toast element disappear again.

// The toast should leave your website after 4.5 seconds
setTimeout(function () {
    const leaveWebsite = new NeptuneAnimate(myElement, "nep-fade-out-down")
	leaveWebsite.startAnimation();
 }, 4500);

Her is a Codepen, where you can see the result.

Toast Animation Example