Vue Snackbar - Material

PRO

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

Toast Basic

Hello world! This is a notification message.

<script setup>
// Vue Material Kit 2 component
import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
</script>
<template>
 <MaterialSnackbar
  color="dark"
  icon="diamond"
  title="Material Design"
  date="11 mins ago"
  description="Hello, world! This is a notification message."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
4</script>
5<template>
6 <MaterialSnackbar
7  color="dark"
8  icon="diamond"
9  title="Material Design"
10  date="11 mins ago"
11  description="Hello, world! This is a notification message."
12 />
13</template>

Props Information

Name	Type	Default	Description
title*	string		Used to set the `MaterialSnackbar` title. It is a required prop.
date	string		Used to set the `MaterialSnackbar` date or time.
description	string		Used to set the `MaterialSnackbar` content or description.
color	'primary''secondary''info''success''warning''danger''error''light''dark'	success	Change the `MaterialSnackbar` background color.
icon	['component', 'color']		`icon` accepts an object that can be used to set the `MaterialSnackbar` 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 `MaterialSnackbar` once the user hit the close button.

Toast Message

Hello world! This is a notification message.

<script setup>
// Vue Material Kit 2 component
import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
</script>
<template>
 <MaterialSnackbar
  color="success"
  title="Hello, world! This is a notification message."
 />
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialSnackbar from "@/components/MaterialSnackbar.vue";
4</script>
5<template>
6 <MaterialSnackbar
7  color="success"
8  title="Hello, world! This is a notification message."
9 />
10</template>