Skip to main content

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.

Important

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

  import { toast, ToastContainer } from 'react-toastify';

  const CloseButton = ({ closeToast }) => (
    <i
      className="material-icons"
      onClick={closeToast}
    >
    delete
    </i>
  );

function App() {
  const notify = () => {
    toast("The close button change when Chuck Norris display a toast");
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>;
      <ToastContainer closeButton={CloseButton} />
    </div>
  );
}

Define it per toast​

toast("Hello", {
  closeButton: CloseButton
})

Use your own component​

When using a custom component, closeToast is being injected in your component, more details here.

import { ToastContentProps } from "react-toastify";

const MyComponent = ({ closeToast }: ToastContentProps) => {
  return <button onClick={closeToast}>close</button>
}

function App() {
  const notify = () => {
    toast(MyComponent);
  };

  return (
    <div>
      <button onClick={notify}>Notify</button>;
      {/* Remove the closeButton globally */}
      <ToastContainer closeButton={false} />
    </div>
  );
}

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
  })
Important

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

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