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

# Toast Component

Toast bileşenleri, ekranın kenarlarına yerleştirilmiş kısa, müdahaleci olmayan bildirimler görüntüler. Sabit konumlandırma ve uyarı bileşenleriyle oluşturulan tostlar, başarı onayları, hata mesajları veya durum güncellemeleri gibi sistem geri bildirimlerini iletir. Frutjam tost sistemi altı yerleştirme pozisyonunu destekler; form gönderimleri, eşzamansız işlemler ve gerçek zamanlı bildirimler için idealdir.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf        | Tip         | Tanım                                           |
| ------------ | ----------- | ----------------------------------------------- |
| toast        | Temel       | Sabit konumlu bildirim kabı                     |
| toast-top    | Değiştirici | Görünüm alanının üst kısmına tutturucular       |
| toast-bottom | Değiştirici | Görünüm alanının altına sabitlenir (varsayılan) |
| toast-start  | Değiştirici | Soldaki çapalar                                 |
| toast-center | Değiştirici | Yatay olarak ortalanmış                         |
| toast-end    | Değiştirici | Sağdaki bağlantı noktaları (varsayılan)         |
| toast-middle | Değiştirici | Dikey olarak ortalanmış                         |

## Temel Kullanım

## Tost Pozisyonları

### En İyi Pozisyonlar

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

### Alt Pozisyonlar

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

## Tost Renkleri

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

## Çoklu Tostlar

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