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 React from 'react';
  import { toast, ToastContainer } from 'material-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
})

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

#Override the default one

Important

#Define it per toast

#Remove it

Important

Override the default one

Define it per toast

Remove it