---
title: "Toast"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/zh-hant/components/toast
---

# Toast Component

Toast 元件在螢幕邊緣顯示簡短的、非侵入性的通知。 Toast 採用固定定位和警報組件構建，可傳達系統回饋，例如成功確認、錯誤訊息或狀態更新。 Frutjam toast 系統支援六個放置位置 - 非常適合表單提交、非同步操作和即時通知。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級           | 類型  | 描述          |
| ------------ | --- | ----------- |
| toast        | 根據  | 固定位置通知容器    |
| toast-top    | 修飾符 | 錨定到視窗頂部     |
| toast-bottom | 修飾符 | 錨定到視窗底部（預設） |
| toast-start  | 修飾符 | 錨點向左        |
| toast-center | 修飾符 | 水平居中        |
| toast-end    | 修飾符 | 錨點位於右側（預設）  |
| toast-middle | 修飾符 | 垂直居中        |

## 基本用法

## 敬酒姿勢

### 最高職位

```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>
```

### 底部位置

```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>
```

## 吐司顏色

```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>
```

## 多次吐司

```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>
```