Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add dismissal button #7

Open
Twixes opened this issue Dec 21, 2020 · 7 comments
Open

Add dismissal button #7

Twixes opened this issue Dec 21, 2020 · 7 comments
Labels
enhancement New feature or request

Comments

@Twixes
Copy link

Twixes commented Dec 21, 2020

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 timolins added the enhancement New feature or request label Dec 21, 2020
@timolins
Copy link
Owner

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
Copy link

asp2809 commented Dec 23, 2020

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
Copy link

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
Copy link

@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
Copy link

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

@christian-ek
Copy link

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

@jhonatanAlanFerreira
Copy link

jhonatanAlanFerreira commented Apr 12, 2024

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

Is it possible to do something similar but using toast.promisse() ?
It seems like it only allow plaintext, not html.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

8 participants