A professional, zero-dependency, and highly customizable snackbar library.
Created by Mohammadreza Soltani
Using snacky.js is incredibly simple. Just include the script in your HTML file, and you can call it from anywhere.
<!-- 1. Include the script anywhere in your body -->
<script src="snacky.js"></script>
<!-- Or just paste the script block directly -->
<!-- 2. Call it from your JavaScript -->
<script>
snacky.show("Your profile has been updated!", {
type: 'success',
position: 'bottomRight',
duration: 5000,
progressBar: 'show'
});
</script>
Customize every aspect of your notifications with these options.
| Option | Type | Description | Default |
|---|---|---|---|
direction | 'ltr' | 'rtl' | Sets the text and layout direction. | 'ltr' |
type | string | Determines the icon and color. 12 types available. | 'info' |
position | string | Where the snackbar appears on desktop screens. | 'bottomRight' |
icon | 'show' | 'hidden' | Shows or hides the icon. | 'show' |
progressBar | 'show' | 'hidden' | Shows or hides the duration progress bar. | 'hidden' |
autoHide | boolean | If false, the snackbar stays until manually dismissed. | true |
duration | number | Time in milliseconds before auto-hiding. | 4000 |
wordHighlight | string | string[] | A word or array of words to make bold. | null |
soundEffect | boolean | Plays a subtle sound on notification show. | false |
vibrate | boolean | Vibrates the device (on supported platforms). | false |