---
title: "Javascript Forms Toast & snackbar Example | Mobiscroll"
component: "Forms"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/forms/notifications"
---

# Toast & snackbar - JavaScript Forms demo

Javascript notification examples of toast and snackbar with or w/o action. With undo, retry or custom functionality. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/forms/notifications)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/form-components/forms/notifications)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/forms/notifications.md), [Angular](https://demo.mobiscroll.com/angular/forms/notifications.md), [React](https://demo.mobiscroll.com/react/forms/notifications.md), [Vue](https://demo.mobiscroll.com/vue/forms/notifications.md)

## Description

Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.

## What this demo shows

- This demo shows Toast and Snackbar notifications for providing feedback and status updates without interrupting the user.
- **Placement** Notifications positioned at the top or bottom of the screen.
- **Preset styles** Primary, secondary, success, danger, warning, and info color options.
- **Toast** Lightweight, temporary messages that confirm an action has been completed.
- **Snackbar** Notifications displayed with or without an action button.
- **Snackbar actions** Custom action labels that execute application logic, such as retrying a failed operation.

## Best for

- **Save confirmations** Letting users know that their data was saved successfully.
- **Event creation feedback** Confirming that an event was created without interrupting the workflow.
- **Status updates** Communicating short, temporary updates while users continue their current task.
- **Recoverable errors** Providing a Snackbar action that lets users retry a failed operation.
- **Non-blocking feedback** Sharing information that does not require a modal dialog or immediate response.

## Tutorial

### Toast

Top or bottom, in a number of preset colors, use the toast to inform users. Perfect for feedback on data save, event creation and much more.

```js
mobiscroll.toast({
    message: 'Message sent'
});

mobiscroll.toast({
    message: 'Message sent',
    display: 'top'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'primary'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'secondary'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'success'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'danger'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'warning'
});

mobiscroll.toast({
    message: 'Message sent',
    color: 'info'
});
```

### Snackbar

The snackbar can be rendered with or without and action. Actions can have custom labels and when clicked can call any custom code.

```js
mobiscroll.snackbar({
    message: 'Your draft has been discarded'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    display: 'top'
});

mobiscroll.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
        text: 'Retry',
        action: function () {
            mobiscroll.toast({
                message: 'Retrying...'
            });
        }
    }
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'primary'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'secondary'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'success'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'danger'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'warning'
});

mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'info'
});
```

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

document.getElementById('bottom-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
  });
});

document.getElementById('top-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    display: 'top',
  });
});

document.getElementById('primary-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'primary',
  });
});

document.getElementById('secondary-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'secondary',
  });
});

document.getElementById('success-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'success',
  });
});

document.getElementById('danger-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'danger',
  });
});

document.getElementById('warning-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'warning',
  });
});

document.getElementById('info-toast').addEventListener('click', function () {
  mobiscroll.toast({
    message: 'Message sent',
    color: 'info',
  });
});

document.getElementById('bottom-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
  });
});

document.getElementById('top-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    display: 'top',
  });
});

document.getElementById('action-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Connection timed out. Showing limited messages.',
    button: {
      text: 'Retry',
      action: function () {
        mobiscroll.toast({
          message: 'Retrying...',
        });
      },
    },
  });
});

document.getElementById('primary-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'primary',
  });
});

document.getElementById('secondary-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'secondary',
  });
});

document.getElementById('success-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'success',
  });
});

document.getElementById('danger-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'danger',
  });
});

document.getElementById('warning-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'warning',
  });
});

document.getElementById('info-snackbar').addEventListener('click', function () {
  mobiscroll.snackbar({
    message: 'Your draft has been discarded',
    color: 'info',
  });
});
```

### HTML

```html
<div class="mbsc-from-group">
    <div class="mbsc-form-group-title">Toast</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button id="bottom-toast">Bottom toast</button>
        <button mbsc-button id="top-toast">Top toast</button>
        <button mbsc-button id="primary-toast">Primary toast</button>
        <button mbsc-button id="secondary-toast">Secondary toast</button>
        <button mbsc-button id="success-toast">Success toast</button>
        <button mbsc-button id="danger-toast">Danger toast</button>
        <button mbsc-button id="warning-toast">Warning toast</button>
        <button mbsc-button id="info-toast">Info toast</button>
    </div>
</div>
<div class="mbsc-from-group">
    <div class="mbsc-form-group-title">Snackbar</div>
    <div class="mbsc-button-group-block">
        <button mbsc-button id="bottom-snackbar">Bottom snackbar</button>
        <button mbsc-button id="top-snackbar">Top snackbar</button>
        <button mbsc-button id="action-snackbar">Snackbar with action</button>
        <button mbsc-button id="primary-snackbar">Primary snackbar</button>
        <button mbsc-button id="secondary-snackbar">Secondary snackbar</button>
        <button mbsc-button id="success-snackbar">Success snackbar</button>
        <button mbsc-button id="danger-snackbar">Danger snackbar</button>
        <button mbsc-button id="warning-snackbar">Warning snackbar</button>
        <button mbsc-button id="info-snackbar">Info snackbar</button>
    </div>
</div>
```

## Implementation notes

- `message` sets the notification text for both `toast` and `snackbar`.
- `color` sets a preset color for either notification type: `primary`, `secondary`, `success`, `danger`, `warning`, `info`. Omitting it renders the default (neutral) style.
- `display: 'top'` positions the notification at the top of its container; omitting `display` defaults to bottom placement.
- `context` scopes the notification to render inside a given container element/selector instead of the document body - used in the demo to keep each notification confined to the demo panel.
- A snackbar action button is added with `button: { text: string, action: () => void }`; `text` labels the button and `action` runs on click (the demo's action re-triggers a `toast` call to confirm the retry).
- Framework invocation differs by framework: JS/jQuery call the global `mobiscroll.toast({...})` / `mobiscroll.snackbar({...})` functions imperatively from a click handler; Angular injects the `Notifications` service and calls `this.notify.toast({...})` / `this.notify.snackbar({...})`; React and Vue instead render declarative `<Toast>`/`<Snackbar>` components (`MbscToast`/`MbscSnackbar` in Vue) with a boolean `isOpen` prop (`:isOpen` in Vue) held in state and set to `true` to show the notification, and an `onClose`/`@close` callback that resets that state when the notification dismisses itself.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [Alert, confirm & prompt](https://demo.mobiscroll.com/javascript/forms/alert-confirm-prompt.md) - Javascript alert, confirm and prompt dialogs for giving feedback to users and for quick & focused data entry.