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.

Next Breadcrumbs

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

Edit this page on GitHub

Sponsors

Make your React site visually editable

Become a sponsor

Sponsors

Make your React site visually editable

Become a sponsor