Vue Snackbar - Soft UI

PRO

Snackbars provide brief messages about app processes at the bottom of the screen. Use our Snackbar component to create a beautiful notification/alert for your Vue.js project.

Snackbar Example

Use this example to create a simple and beautiful snackbar.

Hello world! This is a notification message.

<template>
 <soft-snackbar
  title="Soft UI Dashboard"
  description="Hello, world! This is a notification message"
  color="success"
  icon="ni ni-notification-70"
  iconColor="white"
  date="12-06-2022"
 />
</template>

<script>
import SoftSnackbar from "@/components/SoftSnackbar.vue";
export default { components: { SoftSnackbar, }, };
</script>

1<template>
2 <soft-snackbar
3  title="Soft UI Dashboard"
4  description="Hello, world! This is a notification message"
5  color="success"
6  icon="ni ni-notification-70"
7  iconColor="white"
8  date="12-06-2022"
9 />
10</template>
11
12<script>
13import SoftSnackbar from "@/components/SoftSnackbar.vue";
14export default { components: { SoftSnackbar, }, };
15</script>

Props Information

Name	Type	Default	Description
title*	string		Used to set the `SoftSnackbar` title.
date	string		Used to set the `SoftSnackbar` date or time.
description	string		Used to set the `SoftSnackbar` content or description.
color	'primary''secondary''info''success''warning''danger''light''dark'	success	Change the `SoftSnackbar` background color.
icon	['component', 'color']		`icon` accepts both String and Object that can be used to set the `SoftSnackbar` icon along with its color.
color	string	success	Used to set the `SoftSnackbar` background color.
closeHandler	function		Used to close the `SoftSnackbar` once the user hit the close button.