Toast

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

Class name
Type
toastComponent 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!
Support daisyUI's development: Open Collective
daisyUI store

Official daisyUI
Figma Library

Available on daisyUI store

More details