Skip to main content
Frutjam logo Frutjam
v2.2.2
Theme

Komponen Roti Bakar

Terakhir diperbarui:

Tailwind CSS khusus CSS untuk pemosisian notifikasi — penempatan atas, bawah, awal, akhir, dan tengah. Tidak ada JavaScript untuk tata letak. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Komponen Toast menampilkan notifikasi singkat dan tidak mengganggu yang ditempatkan di tepi layar. Dibangun dengan posisi tetap dan komponen peringatan, toast mengkomunikasikan umpan balik sistem seperti konfirmasi keberhasilan, pesan kesalahan, atau pembaruan status. Sistem toast Frutjam mendukung enam posisi penempatan—ideal untuk pengiriman formulir, operasi asinkron, dan notifikasi real-time.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

Kelas Jenis Keterangan
toastBasisFixed-position notification container
toast-topPengubahAnchors to the top of the viewport
toast-bottomPengubahAnchors to the bottom of the viewport (default)
toast-startPengubahAnchors to the left
toast-centerPengubahBerpusat secara horizontal
toast-endPengubahAnchors to the right (default)
toast-middlePengubahBerpusat secara vertikal

Penggunaan Dasar

1
2
3
4
5
<div class="toast">
  <div class="alert alert-info">
    <span>New message arrived.</span>
  </div>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useToast } from 'frutjam/react'

export default function ToastDemo() {
  const toast = useToast()
  return (
    <>
      <button className="btn" onClick={() => toast.info('New message arrived.')}>Show Toast</button>
      <div className="toast">
        {toast.toasts.map(t => (
          <div key={t.id} className={`alert${t.type ? ` alert-${t.type}` : ''}`}>
            <span>{t.message}</span>
          </div>
        ))}
      </div>
    </>
  )
}

Toast Positions

Top Positions

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<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 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<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 
1
2
3
4
5
6
7
8
<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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP memberi editor AI Anda nama dan struktur kelas Roti panggang yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.

Coba Cherry MCP