Use a custom close button or remove it

Override the default one

You can pass a custom close button to the ToastContainer to replace the default one.


When you use a custom close button, your button will receive a closeToast function. You need to use it to close the toast.

import React from 'react';
import { toast, ToastContainer } from 'react-toastify';
const CloseButton = ({ closeToast }) => (
function App() {
const notify = () => {
toast("The close button change when Chuck Norris display a toast");
return (
<button onClick={notify}>Notify</button>;
<ToastContainer closeButton={CloseButton} />

Define it per toast

toast("Hello", {
closeButton: CloseButton

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:

  • remove it by default
<ToastContainer closeButton={false} />
  • remove it per toast
toast("hello", {
closeButton: false

if you removed it globally, you can still choose to display it for a specific toast

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