> For the complete documentation index, see [llms.txt](https://neptune-css.gitbook.io/neptune-css-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://neptune-css.gitbook.io/neptune-css-docs/components/toasts.md).

# 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](/neptune-css-docs/plugins/neptune-animations.md) 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 %}