# Toasts

{% code title="Default Toast" %}
```html
<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>
```
{% endcode %}

## Styles

{% tabs %}
{% tab title="Primary" %}
```html
<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>
```
{% endtab %}

{% tab title="Accent" %}
```html
<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>
```
{% endtab %}

{% tab title="Information" %}
```html
<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>
```
{% endtab %}

{% tab title="Success" %}
```html
<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>
```
{% endtab %}

{% tab title="Warning" %}
```html
<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>
```
{% endtab %}

{% tab title="Error" %}
```html
<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>
```
{% endtab %}
{% endtabs %}

{% embed url="https://codepen.io/neptunecss/pen/JjmmzmX?editors=1000" %}
Toast style examples
{% endembed %}

## 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](../plugins/neptune-animations) library.&#x20;

### Example

{% code title="index.html" %}
```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>
```
{% endcode %}

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

<pre class="language-javascript"><code class="lang-javascript"><strong>// Get the element you want to animate
</strong><strong>const myToast= document.getElementById("myToast");
</strong>
// Create a new animation instance und start the animation
const enterWebsite= new NeptuneAnimate(myToast, "nep-fade-in-up");
enterWebsite.startAnimation();
</code></pre>

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.

```javascript
// 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.

{% embed url="https://codepen.io/neptunecss/pen/yLQOvpr" %}
Toast Animation Example
{% endembed %}



