---
title: "Toast"
type: component
version: "2.1.2"
doc_version: "2.3.0"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Toast with configurable positions and stacking. Success, error, warning, and info variants for accessible, non-intrusive user notifications."
url: https://frutjam.com/components/toast
---

# Toast Component

 Toast components display brief, non-intrusive notifications positioned at the edges of the screen. Built with fixed positioning and alert components, toasts communicate system feedback like success confirmations, error messages, or status updates. The Frutjam toast system supports six placement positions—ideal for form submissions, async operations, and real-time notifications.

| Class        | Type     | Description                                     |
| ------------ | -------- | ----------------------------------------------- |
| toast        | Base     | Fixed-position notification container           |
| toast-top    | Modifier | Anchors to the top of the viewport              |
| toast-bottom | Modifier | Anchors to the bottom of the viewport (default) |
| toast-start  | Modifier | Anchors to the left                             |
| toast-center | Modifier | Horizontally centered                           |
| toast-end    | Modifier | Anchors to the right (default)                  |
| toast-middle | Modifier | Vertically centered                             |

## Basic Usage

## Toast Positions

### Top Positions

```html
<div class="toast toast-top toast-start">
  <div class="alert alert-info"><span>Top Start</span></div>
</div>

<div class="toast toast-top toast-center">
  <div class="alert alert-info"><span>Top Center</span></div>
</div>

<div class="toast toast-top toast-end">
  <div class="alert alert-info"><span>Top End</span></div>
</div>
```


### Bottom Positions

```html
<div class="toast toast-bottom toast-start">
  <div class="alert alert-info"><span>Bottom Start</span></div>
</div>

<div class="toast toast-bottom toast-center">
  <div class="alert alert-info"><span>Bottom Center</span></div>
</div>

<div class="toast toast-bottom toast-end">
  <div class="alert alert-info"><span>Bottom End</span></div>
</div>
```


## Toast Colors

```html
<div class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>File saved successfully.</span>
  </div>
  <div class="alert alert-warning">
    <span>Storage is almost full.</span>
  </div>
  <div class="alert alert-error">
    <span>Connection failed.</span>
  </div>
  <div class="alert alert-info">
    <span>Update available.</span>
  </div>
</div>
```


## Multiple Toasts

```html
<div class="toast toast-top toast-end">
  <div class="alert alert-success">
    <span>Profile updated.</span>
  </div>
  <div class="alert alert-info">
    <span>2 new notifications.</span>
  </div>
</div>
```