Toast

Toast is a wrapper to stack elements, positioned on the corner of page.

Class name		 Type
toast Component Container element that sticks to the corner of page
toast-start
Responsive
align horizontally to the left
toast-center
Responsive
align horizontally to the center
toast-end
Responsive
align horizontally to the right (default)
toast-top
Responsive
align vertically to top
toast-middle
Responsive
align vertically to middle
toast-bottom
Responsive
align vertically to bottom (default)
# toast with alert inside
New message arrived.
# toast-top toast-start
New mail arrived.
Message sent successfully.
# toast-top toast-center
New mail arrived.
Message sent successfully.
# toast-top toast-end
New mail arrived.
Message sent successfully.
# toast-start toast-middle
New mail arrived.
Message sent successfully.
# toast-center toast-middle
New mail arrived.
Message sent successfully.
# toast-end toast-middle
New mail arrived.
Message sent successfully.
# toast-start toast-bottom (default)
New mail arrived.
Message sent successfully.
# toast-center toast-bottom (default)
New mail arrived.
Message sent successfully.
# toast-end (default) toast-bottom (default)
New mail arrived.
Message sent successfully.
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!

Sponsors

Make your React site visually editable

Become a sponsor

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!

Congratulations random Internet user!

You've been selected for a chance to get one year of subscription to use Wikipedia for free!