←back to thread

Building a Toast Component

(emilkowal.ski)
117 points FragrantRiver | 4 comments | 03 Dec 25 14:51 UTC | HN request time: 0s | source
1. varun_ch ◴[07 Dec 25 17:10 UTC] No.46183219[source]▶
I’m far from a UX designer but whenever I use something with toasts I feel like I don’t notice them pop up in my periphery. I think it would be better if the confirmation for an action I did just showed up wherever I performed that action (like a button changing state to a spinner and then either an error or a confirmation)
replies(1): >>46185215 #
2. hungrymagnum ◴[07 Dec 25 21:14 UTC] No.46185215[source]▶
This can be applied for a success (change the button to a green tick mark) or an unsuccessful action (change the button to a red x mark).

But what if you want to give details on why the action was unsuccessful? How do you show it near the button or change the button itself?

replies(1): >>46187220 #
3. chao- ◴[08 Dec 25 01:16 UTC] No.46187220[source]▶
>How do you show it near the button?

What stops you from placing these details you want as near as is reasonable to a button? Alternatively, placing the details near or in some container for the data/entity/element that the button relates to?

replies(1): >>46191436 #
4. wildrhythms ◴[08 Dec 25 12:22 UTC] No.46191436{3}[source]▶
Good idea, but impossible to do when the user switches away from where the initial async interaction began.