Toast & snackbar

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.

Get started with this example

Demo

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.

Javascript jQuery Angular React Vue 
<template>
  <MbscToast
    message="Message sent"
  />

  <MbscToast
    message="Message sent"
    display="top"
  />

  <MbscToast
    message="Message sent"
    color="primary"
  />

  <MbscToast
    message="Message sent"
    color="secondary"
  />

  <MbscToast
    message="Message sent"
    color="success"
  />

  <MbscToast
    message="Message sent"
    color="danger"
  />

  <MbscToast
    message="Message sent"
    color="warning"
  />

  <MbscToast
    message="Message sent"
    color="info"
  />
</template>
Snackbar

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

Javascript jQuery Angular React Vue 
<script setup>
const isActionToastOpen = ref(false)

const actionButton = {
  text: 'Retry',
  action: () => {
    isActionToastOpen.value = true
  }
}
</script>

<template>
  <MbscSnackbar
    message="Your draft has been discarded"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    display="top"
  />
  <MbscSnackbar
    message="Connection timed out. Showing limited messages."
    :button="actionButton"
    :isOpen="isActionSnackbarOpen"
    @close="isActionSnackbarOpen = false"
  />
  <MbscToast
    message="Retrying..."
    :isOpen="isActionToastOpen"
    @close="isActionToastOpen = false"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="primary"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="secondary"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="success"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="danger"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="warning"
  />
  <MbscSnackbar
    message="Your draft has been discarded"
    color="info"
</template>
Preview in fullscreen

Duplicate Session

You have signed in on a different machine. To keep everything in sync, you have been signed out of this session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.

Duplicate Session

We noticed you are logged in on a different machine and have closed your old session.

If you need to invite team members, manage seats and accounts you can do it from the licenses page.