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.

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

Code in 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,
});

Define it globally

<template>
  <h1>Hello {{ msg }}</h1>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const msg = ref<string>('world');
</script>

Open Sandbox

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

toast("hello", {
  closeButton: true, // or MyCustomCloseButton
});