Svelte Notify
-Pro Component
The Svelte Notify is a beautiful, responsive, customisable,
accessible replacement for Javascript’s popup boxes. This plugin
helps to turn standard Svelte alerts into "growl" like
notifications.
Keep reading our Svelte Notify examples and learn how to use this
plugin.
Usage
<Notifications>
</Notifications>
Initialization
<script>
import { getContext } from "svelte";
import { getNotificationsContext } from "svelte-notifications";
const { addNotification } = getNotificationsContext();
</script>
Examples
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-left',
notifyClassNames: 'top left',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Top Left
</button>
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-center',
notifyClassNames: 'top center',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Top Center
</button>
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-right',
notifyClassNames: 'top right',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Top Right
</button>
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'bottom-left',
notifyClassNames: 'bottom left',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Bottom Left
</button>
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'bottom-center',
notifyClassNames: 'bottom center',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Bottom Center
</button>
<button
class="btn btn-default"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'bottom-right',
notifyClassNames: 'bottom right',
icon: 'ni ni-bell-55',
type: 'default',
removeAfter: 4000
});
}}>
Bottom Right
</button>
Colors
<button
class="btn btn-info"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-right',
notifyClassNames: 'top right',
icon: 'ni ni-bell-55',
type: 'info',
removeAfter: 4000
});
}}>
Info
</button>
<button
class="btn btn-success"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-right',
notifyClassNames: 'top right',
icon: 'ni ni-bell-55',
type: 'success',
removeAfter: 4000
});
}}>
Success
</button>
<button
class="btn btn-warning"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-right',
notifyClassNames: 'top right',
icon: 'ni ni-bell-55',
type: 'warning',
removeAfter: 4000
});
}}>
Warning
</button>
<button
class="btn btn-danger"
on:click={() => {
addNotification({
id: generateId(),
text:
'Welcome to Svelte Argon Dashboard Pro - a beautiful resource for every web developer',
position: 'top-right',
notifyClassNames: 'top right',
icon: 'ni ni-bell-55',
type: 'danger',
removeAfter: 4000
});
}}>
Danger
</button>