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!
Support daisyUI's development: Open Collective
