---
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/vi/components/toast
---

# Toast Component

Các thành phần bánh mì nướng hiển thị các thông báo ngắn gọn, không xâm phạm được đặt ở các cạnh của màn hình. Được xây dựng với các thành phần cảnh báo và định vị cố định, thông báo chúc mừng truyền đạt phản hồi của hệ thống như xác nhận thành công, thông báo lỗi hoặc cập nhật trạng thái. Hệ thống bánh mì nướng Frutjam hỗ trợ sáu vị trí vị trí—lý tưởng cho việc gửi biểu mẫu, hoạt động không đồng bộ và thông báo theo thời gian thực.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học      | Kiểu            | Sự miêu tả                         |
| ------------ | --------------- | ---------------------------------- |
| toast        | Căn cứ          | Thùng thông báo vị trí cố định     |
| toast-top    | Công cụ sửa đổi | Neo vào đầu khung nhìn             |
| toast-bottom | Công cụ sửa đổi | Neo vào cuối khung nhìn (mặc định) |
| toast-start  | Công cụ sửa đổi | Neo ở bên trái                     |
| toast-center | Công cụ sửa đổi | Căn giữa theo chiều ngang          |
| toast-end    | Công cụ sửa đổi | Neo ở bên phải (mặc định)          |
| toast-middle | Công cụ sửa đổi | Căn giữa theo chiều dọc            |

## Cách sử dụng cơ bản

## vị trí bánh mì nướng

### Vị trí hàng đầu

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

### Vị trí dưới cùng

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

## Màu bánh mì nướng

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

## Nâng ly chúc mừng nhiều lần

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