Add dismissal button

[Twixes]

Feature request

It'd be greatly useful if toasts had an "X" button or something like that to dismiss them early. That can already be done with the API, but a built-in button would be great.

[timolins]

It definitely would be great to have a built-in dismiss option. I still want to try out a couple of options to figure out what works best on mobile & desktop. I'm currently thinking of tap, swipe or a button to dismiss.

[asp2809]

According to me, in the ideal case scenario, it should be a swipe on the mobile and "X" button as suggested by @Twixes on the web as both of these are the most convenient way according to me.

[iamjatinchauhan]

It should be made available, to have an option to set value true or false for "X" button. There could also be an option to set each notification visible time(duration).

[lsbyerley]

@mrjatinchauhan I agree, an "X" button/icon should be an available opt-in option.

There is currently an option to set the duration. You can set the default duration for all toasters or for each type individually.

[sparkplug0025]

+1 for swiping on mobile. Does anyone have an example?

[christian-ek]

If anyone like me googled to find a way to do this here is an example:

const duration = 10000;
const toastContent = (t) => (
  <span>
    {notification.message}
    <button
      onClick={() => toast.dismiss(t.id)}
      className="close-button"
      type="button"
    >
      ×
    </button>
  </span>
);
toast.success(toastContent, { duration });

CSS:

.close-button {
  position: absolute;
  top: 3px;
  right: 5px;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 20px;
  padding: 0px;
  line-height: 1;
  color: #333;
}