Toast

Temporary notifications for displaying system messages

Basic

Basic Toast

Toast notification with alert component

Preview Code Auto

New message arrived.

Div(
    Div(
        Span('New message arrived.'),
        cls='alert alert-info'
    ),
    cls='toast'
)

Positioning

Position: Top Start

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-start"
)

Position: Top Center

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-center"
)

Position: Top End

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-top toast-end"
)

Position: Middle Start

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-start toast-middle"
)

Position: Middle Center

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-center toast-middle"
)

Position: Middle End

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-end toast-middle"
)

Position: Bottom Start

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-start"
)

Position: Bottom Center

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-center"
)

Position: Bottom End

Preview Code Auto

New mail arrived.

Message sent successfully.

Div(
    Div("New mail arrived.", cls="alert alert-info"),
    Div("Message sent successfully.", cls="alert alert-success"),
    cls="toast toast-end"
)

Class Reference

Class	Type	Description
toast	Component	Container element that sticks to the corner of page
toast-start	Placement	Align horizontally to the left
toast-center	Placement	Align horizontally to the center
toast-end	Placement	Align horizontally to the right [Default]
toast-top	Placement	Align vertically to top
toast-middle	Placement	Align vertically to middle
toast-bottom	Placement	Align vertically to bottom [Default]

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo