Toast Messages

So I made a little toast message demo tonight. It also works with the keyboard if you tab. It will focus on the close button of the toaster and it you hit ENTER, the toast is toast!

I was just having a little fun, but it brought up a question for me. What type of HTML element should a toast message be?

I will have a follow up post sometime in the near future explaining all the moving parts. 😉

Photo by Jonathan Pielmayer on Unsplash

Comments

[YuanHao Chiang]

For me, usually the toast should not be closed by just clicking it -- instead, it should be closed using the "X" button that you have added in the corner, plus maybe a "close" caption.

In that case, for toast itself I would use ye good olde <div>.

The reasoning behind why the toast shouldn't get closed just by clicking it is because it may contain text that you need to copy, IE:

"Error (1001): Segmentation Fault when trying to create a new profile".

Sometimes not being able to copy text online because of some action triggered makes usability harder.

Cheers!

[Nick Taylor]

Fair point about copying text. Next version. 😉

I whipped this up pretty quick, so the x is just for show at the moment, since the quick thing to do for demo purposes was to close on click or if the ENTER key is pressed and the toast has focus.

The real question was what type of element to use. So far it’s one vote for <div />.

[YuanHao Chiang]

Me too, <div> for the win. I wouldn't use <button> for sure as the toast itself wouldn't have the close action later on as you say.

Note: nice cover photo 😆 (I'm hungry now).

[Nick Taylor]

I made it so you have to click the x button now.