Toast Service
The Toast Service allows you to programmatically display brief messages such as success, warning, or error notifications. It provides a composable useToast() function that returns methods for showing, hiding, and hiding all toasts.
Inkline automatically injects an <IToastContainer> component within your application, used to display on-demand toast notifications in any of the 4 corners, and 4 sides of your screen, using the toast service.
Use the useToast() composable in your components to show or hide toast notifications.
show({ id, ...props }) - Shows a toast with the provided optionshide({ id }) - Hides a toast with the provided idhideAll() - Hides all currently displayed toasts
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Toast title',
message: 'Toast message'
});
}
return {
showToast
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
</template>
Inkline includes several predefined toast colors that you can use within your application. You can apply a style using the color property.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showLightToast() {
toast.show({
title: 'Light Toast',
message: 'This toast is light like a feather',
color: 'light'
});
}
function showDarkToast() {
toast.show({
title: 'Dark toast',
message: 'This toast is dark like the night',
color: 'dark'
});
}
function showInfoToast() {
toast.show({
title: 'Heads up!',
message: "This toast needs your attention, but it's not super important.",
color: 'info'
});
}
function showSuccessToast() {
toast.show({
title: 'Well done!',
message: 'You successfully read this important alert message.',
color: 'success'
});
}
function showWarningToast() {
toast.show({
title: 'Warning!',
message: "Better check yourself, you're not looking too good.",
color: 'warning'
});
}
function showDangerToast() {
toast.show({
title: 'Oh snap!',
message: 'Change a few things up and try submitting again.',
color: 'danger'
});
}
return {
showLightToast,
showDarkToast,
showInfoToast,
showSuccessToast,
showWarningToast,
showDangerToast
};
}
});
</script>
<template>
<IButton color="light" @click="showLightToast">Show light toast</IButton>
<IButton color="dark" @click="showDarkToast">Show dark toast</IButton>
<IButton color="info" @click="showInfoToast">Show info toast</IButton>
<IButton color="success" @click="showSuccessToast">Show success toast</IButton>
<IButton color="warning" @click="showWarningToast">Show warning toast</IButton>
<IButton color="danger" @click="showDangerToast">Show danger toast</IButton>
</template>
You're able to use the size modifier to control the text and spacing size of your toasts, using one of the available sizes: sm, md, and lg.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showSmallToast() {
toast.show({
title: 'Small Toast',
message: 'This toast is small',
size: 'sm'
});
}
function showMediumToast() {
toast.show({
title: 'Medium Toast',
message: 'This toast is medium',
size: 'md'
});
}
function showLargeToast() {
toast.show({
title: 'Large Toast',
message: 'This toast is large',
size: 'lg'
});
}
return {
showSmallToast,
showMediumToast,
showLargeToast
};
}
});
</script>
<template>
<IButton size="sm" @click="showSmallToast">Show small toast</IButton>
<IButton size="md" @click="showMediumToast">Show medium toast</IButton>
<IButton size="lg" @click="showLargeToast">Show large toast</IButton>
</template>
You're able to use the position modifier to control the position of your toasts, using one of the available positions:
top-lefttoptop-rightleftbottom-rightbottombottom-leftright
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showTopLeftToast() {
toast.show({
title: 'Top-left Toast',
message: 'This toast is positioned at the top-left corner of the screen',
position: 'top-left'
});
}
function showTopToast() {
toast.show({
title: 'Top Toast',
message: 'This toast is positioned at the top of the screen',
position: 'top'
});
}
function showTopRightToast() {
toast.show({
title: 'Top-right Toast',
message: 'This toast is positioned at the top-right corner of the screen',
position: 'top-right'
});
}
function showRightToast() {
toast.show({
title: 'Right Toast',
message: 'This toast is positioned at the right of the screen',
position: 'right'
});
}
function showBottomRightToast() {
toast.show({
title: 'Bottom-right Toast',
message: 'This toast is positioned at the bottom-right corner of the screen',
position: 'bottom-right'
});
}
function showBottomToast() {
toast.show({
title: 'Bottom Toast',
message: 'This toast is positioned at the bottom of the screen',
position: 'bottom'
});
}
function showBottomLeftToast() {
toast.show({
title: 'Bottom-left Toast',
message: 'This toast is positioned at the bottom-left corner of the screen',
position: 'bottom-left'
});
}
function showLeftToast() {
toast.show({
title: 'Left Toast',
message: 'This toast is positioned at the left of the screen',
position: 'left'
});
}
return {
showTopLeftToast,
showTopToast,
showTopRightToast,
showRightToast,
showBottomRightToast,
showBottomToast,
showBottomLeftToast,
showLeftToast
};
}
});
</script>
<template>
<IButton @click="showTopLeftToast">Show top-left toast</IButton>
<IButton @click="showTopToast">Show top toast</IButton>
<IButton @click="showTopRightToast">Show top-right toast</IButton>
<IButton @click="showRightToast">Show right toast</IButton>
<IButton @click="showBottomRightToast">Show bottom-right toast</IButton>
<IButton @click="showBottomToast">Show bottom toast</IButton>
<IButton @click="showBottomLeftToast">Show bottom-left toast</IButton>
<IButton @click="showLeftToast">Show left toast</IButton>
</template>
You can dismiss toast notification using the dismissible property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Dismissible Toast',
message: 'This toast can be dismissed by clicking the close button',
dismissible: true
});
}
return {
showToast
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
</template>
You can dismiss toast notification using the dismissible property. Dismissible toasts have a dismiss button that can be clicked to manually hide them.
Timed toasts are designed to automatically disappear after a set duration, providing users with brief, non-intrusive notifications. They're ideal for conveying success messages, updates, or other time-sensitive information that doesn't require prolonged user attention.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Timed Toast',
message: 'This toast will be visible for 5 seconds',
duration: 5000
});
}
return {
showToast
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
</template>
Sticky toasts remain visible on the screen until the user manually dismisses them. These notifications are suitable for important alerts, error messages, or other critical information that requires user acknowledgement to ensure they've been noticed and understood.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Sticky Toast',
message: 'This toast will be visible until it is dismissed',
duration: 0,
dismissible: true
});
}
return {
showToast
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
</template>
Controlled toasts offer a higher level of flexibility in managing your notifications. By using unique ids, timed, and sticky durations, you can tailor the behavior of each toast to fit your application's specific needs.
To individually control the visibility of a toast, assign a unique id property when creating it. By doing so, you can easily target specific toasts and hide them using the hide() method.
This approach is helpful when managing multiple toasts simultaneously and you need to dismiss a particular toast without affecting others.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toastId = 'toast';
const toast = useToast();
function showToast() {
toast.show({
id: toastId,
title: 'Controlled Toast',
message: 'This toast will be visible until it is programmatically hidden',
duration: 0
});
}
function hideToast() {
toast.hide({ id: toastId });
}
return {
showToast,
hideToast
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
<IButton @click="hideToast">Hide toast</IButton>
</template>
In cases where you want to dismiss all displayed toasts at once, the hideAll() method comes in handy. This method clears all toasts from the screen, providing a clean slate for subsequent notifications.
This is particularly useful in situations where you need to reset the notification stack or prepare the interface for a new user action.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent } from 'vue';
export default defineComponent({
setup() {
const toast = useToast();
function showToast() {
toast.show({
title: 'Controlled Toast',
message: 'This toast will be visible until it is programmatically hidden',
duration: 0
});
}
function hideAllToasts() {
toast.hideAll();
}
return {
showToast,
hideAllToasts
};
}
});
</script>
<template>
<IButton @click="showToast">Show toast</IButton>
<IButton @click="hideAllToasts">Hide all toasts</IButton>
</template>
Inkline's toast notifications allow you to fully customize the content displayed, including icons, titles, and messages. By utilizing hoisting, you can render your own custom elements, giving you complete control over the look and feel of your toasts.
This level of customization ensures that your notifications align seamlessly with your application's design and branding, enhancing the overall user experience.
<script lang="ts">
import { useToast } from '@inkline/inkline/composables';
import { defineComponent, h } from 'vue';
export default defineComponent({
setup() {
const toastService = useToast();
function onClickShowToast() {
toastService.show({
icon: h('span', 'ICON'),
title: h('strong', 'Toast heading'),
message: h('p', 'This message is a VNode')
});
}
return {
onClickShowToast
};
}
});
</script>
<template>
<IButton @click="onClickShowToast">Show toast</IButton>
</template>
These slots are used internally for dynamically rendering the toast content.
These events are used internally to handle the toast notification visibility.