Use a custom close button or remove it
Override the default one
You can pass a custom close button to the toast options to replace the default one.
TIP
When you use a custom close button, your button will receive a closeToast function. You need to use it to close the toast.
<script setup lang="ts">
import { h } from 'vue';
import { toast } from 'vue3-toastify';
import { VNodeIcon, ComponentIcon } from './icons.tsx';
import 'vue3-toastify/dist/index.css';
const notify = () => {
toast('component close icon1', {
closeOnClick: false,
autoClose: false,
position: toast.POSITION.BOTTOM_CENTER,
closeButton: ComponentIcon, // ComponentIcon as CloseBtnType,
});
toast('component close icon2', {
closeOnClick: false,
autoClose: false,
position: toast.POSITION.BOTTOM_CENTER,
closeButton: (props) => h(ComponentIcon, props), // CloseButtonProps
});
toast('VNode close icon', {
closeOnClick: false,
autoClose: false,
position: toast.POSITION.BOTTOM_CENTER,
closeButton: ({ closeToast }) => h(VNodeIcon, { onClick: closeToast }),
});
};
</script>
<template>
<div>
<button @click="notify">Notify !</button>
</div>
</template>
Code in Jsx:
jsx
toast('HELLO', {
closeButton: (props) => (
<ComponentIcon
{...props}
class="xxx"
/>
),
autoClose: false,
closeOnClick: false,
});
// or
toast('HELLO', {
closeButton: ({ closeToast }) => (
<VNodeIcon
// @ts-ignore
onClick={closeToast}
class="xxx"
/>
),
autoClose: false,
closeOnClick: false,
});toast('HELLO', {
closeButton: (props) => (
<ComponentIcon
{...props}
class="xxx"
/>
),
autoClose: false,
closeOnClick: false,
});
// or
toast('HELLO', {
closeButton: ({ closeToast }) => (
<VNodeIcon
// @ts-ignore
onClick={closeToast}
class="xxx"
/>
),
autoClose: false,
closeOnClick: false,
});Define it globally
import { h } from 'vue'; import App from './App.vue'; import { createApp } from 'vue'; import { VNodeIcon, ComponentIcon } from './icons.tsx'; import Vue3Toasity from 'vue3-toastify'; import 'vue3-toastify/dist/index.css'; createApp(App).use( Vue3Toasity, { closeButton: (props) => h(ComponentIcon, props), // CloseButtonProps // closeButton: ComponentIcon as CloseBtnType, // closeButton: ({ closeToast }) => h(VNodeIcon, { onClick: closeToast }), autoClose: false, closeOnClick: false, }, // global options type definition --> ToastContainerOptions ).mount('#app');
Remove it
Sometimes you don't want to display a close button. It can be removed globally or per toast. Pass false to closeButton props:
TIP
if you removed it globally, you can still choose to display it for a specific toast
js
toast("hello", {
closeButton: true, // or MyCustomCloseButton
});toast("hello", {
closeButton: true, // or MyCustomCloseButton
});