Close button isn't easily discoverable on hover

[andrewbarnesweb]

The close button is only visible on hover, which isn't easily discoverable for users. They may well not know the functionality exists if they never hover over the component.

Further to this, on touch devices, there is no obvious way to trigger the functionality - I thought it was a bug when trying on an iPhone - as there's no icon to hit.

[choeqq]

I can resolve that issue if it wasnt assigned yet, I will add that as custom option for toast 😉

[emilkowalski]

Nice! Let's make it optional and disabled by default @andrewbarnesweb.

[andrewbarnesweb]

Nice! Let's make it optional and disabled by default @andrewbarnesweb.

Not sure I follow 🙂. The close button is already optional? Just when it's passed in you can't see it, unless you hover - so I raised a PR for having the close button visible if passed.

Let me know what your expectation is here and I'll update the PR 👍🏻

[cindyeme]

@andrewbarnesweb @emilkowalski is it possible to change the position of the closeButton?
I would love to justify it to the right after the text and it should be discoverable without the hover effect.

[schulzf]

@emilkowalski is there any way to change the position of the close button without having to make a full blown custom toast?

[emilkowalski]

The close button is discoverable without the hover effect now. To change its position you can target data-close-button="true" element in tailwind or css and change the top/bottom/right/left values.