Vue Snackbar - Argon

PRO

The ArgonSnackbar component helps you to simply create a beautiful notification/alert.

Demo

Hello world! This is a notification message.

1<template>
2 <argon-snackbar
3  title="Argon Dashboard"
4  date="11 mins ago"
5  description="Hello, world! This is a notification message."
6  :icon="{ component: 'ni ni-check-bold', color: 'white' }"
7  color="success"
8/>
9</template>
10
11<script>
12import ArgonSnackbar from "@/components/ArgonSnackbar.vue";
13export default {
14 components: {
15  ArgonSnackbar,
16   },
17 };
18</script>

<template>
 <argon-snackbar
  title="Argon Dashboard"
  date="11 mins ago"
  description="Hello, world! This is a notification message."
  :icon="{ component: 'ni ni-check-bold', color: 'white' }"
  color="success"
/>
</template>

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

Props Information

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