Vanilla JS · No Dependencies
onvshark-toastify
Lightweight, zero-dependency toast notification for any web project. Just two files — drop in and go.
Lightweight, zero-dependency toast notification for any web project. Just two files — drop in and go.
<link rel="stylesheet" href="toastify.css">
<script src="toastify.js"></script>onvsToast(icon, type, message, subMessage, close, position)| # | Parameter | Type | Description |
|---|---|---|---|
| 1 | icon |
boolean |
true = show SVG icon · false = no icon |
| 2 | type |
string |
'success' · 'info' · 'warning' · 'danger' |
| 3 | message |
string | null |
Main text — pass null for default "Message" |
| 4 | subMessage |
string | null |
Small text below message — pass null to omit |
| 5 | close |
number | false |
Auto-dismiss duration in ms — false = close button only |
| 6 | position |
string |
See position table below |
| Value | Description |
|---|---|
'top-left' | Top left corner |
'top-center' | Top center |
'top-right' | Top right corner (default) |
'bottom-left' | Bottom left corner |
'bottom-center' | Bottom center |
'bottom-right' | Bottom right corner |
'middle' | Center of screen |
onvsToast(true, 'success', 'Data berhasil disimpan', 'Record tersimpan ke database', 4000, 'top-right')onvsToast(false, 'danger', 'Gagal menyimpan', null, 3000, 'top-right')onvsToast(true, 'warning', 'Konfirmasi diperlukan', 'Klik ✕ untuk menutup', false, 'middle')onvsToast(true, 'info', 'Tersimpan!', null, 1000, 'bottom-right')| Type | Color |
|---|---|
success | #2ab57d |
info | #4ba6ef |
warning | #ffbf53 |
danger | #fd625e |