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

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