Snackbar.js

Explore how the Snackbar.js library can be used to display notifications in different positions and with various styles. The demo below showcases different configurations.

Basic Snackbar - All Positions

Snackbar Inside an Element

This is an example container. The snackbar will appear inside this container.

Dismissible Snackbars

Custom Duration and Style

Status-Based Snackbars

Documentation

The Snackbar.js library allows you to show notifications (snackbars) on your web page with ease. Below is a brief documentation of the available options:

message: string - The text message to display in the snackbar. (Required)
duration: number - The duration the snackbar should stay visible, in milliseconds. Default is 3000ms. (Optional)
position: string - The position where the snackbar should appear on the page. Available options:
- 'top-left'
- 'top-center'
- 'top-right'
- 'center-left'
- 'center-right'
- 'bottom-left'
- 'bottom-center'
- 'bottom-right'
(Optional)
element: HTMLElement - An HTML element to which the snackbar should be appended. If provided, the position option is ignored. (Optional)
customClass: string - A custom CSS class to style the snackbar. (Optional)
dismissible: boolean - If set to `true`, the snackbar will not auto-dismiss and will show a close button. (Optional)
closeIcon: string - Custom HTML for the close button icon. Defaults to a Phosphor Icons `x` icon. (Optional)
status: string - Predefined statuses like `success`, `error`, `warning`, or `info` that apply standard styles. (Optional)

To use the library, call the showSnackbar function with the desired options:

showSnackbar({
    message: 'Your message here!',
    position: 'top-center',
    duration: 3000,
    customClass: 'your-custom-class',
    dismissible: true,
    closeIcon: '<i class="your-custom-icon"></i>'
});