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