Skip to content

Toast

Added in version 0.30.0

A widget which displays a notification message.

  • Focusable
  • Container

Note that Toast isn't designed to be used directly in your applications, but it is instead used by notify to display a message when using Textual's built-in notification system.

Styling

You can customize the style of Toasts by targeting the Toast CSS type. For example:

Toast {
    padding: 3;
}

If you wish to change the location of Toasts, it is possible by targeting the ToastRack CSS type. For example:

ToastRack {
        align: right top;
}

The three severity levels also have corresponding classes, allowing you to target the different styles of notification. They are:

  • -information
  • -warning
  • -error

If you wish to tailor the notifications for your application you can add rules to your CSS like this:

Toast.-information {
    /* Styling here. */
}

Toast.-warning {
    /* Styling here. */
}

Toast.-error {
    /* Styling here. */
}

You can customize just the title wih the toast--title class. The following would make the title italic for an information toast:

Toast.-information .toast--title {
    text-style: italic;
}

Example

ToastApp ▌ ▌It's an older code, sir, but it ▌checks out. ▌ ▌ ▌Possible trap detected ▌Now witness the firepower of this ▌fully ARMED and OPERATIONAL battle ▌station! ▌ ▌ ▌It's a trap! ▌ ▌ ▌It's against my programming to ▌impersonate a deity. ▌ 

from textual.app import App


class ToastApp(App[None]):
    def on_mount(self) -> None:
        # Show an information notification.
        self.notify("It's an older code, sir, but it checks out.")

        # Show a warning. Note that Textual's notification system allows
        # for the use of Rich console markup.
        self.notify(
            "Now witness the firepower of this fully "
            "[b]ARMED[/b] and [i][b]OPERATIONAL[/b][/i] battle station!",
            title="Possible trap detected",