Toast

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.

Overview

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen. Give the toast a unique id and assign this value to the toast argument of a button. As an example, the following shortcode displays two buttons that, when clicked, trigger a toast message. The messages are stacked when both buttons are clicked in a short timeframe.

{{< button toast="toast-example-1" >}}
    Show toast 1
{{< /button >}}

{{< button toast="toast-example-2" >}}
    Show toast 2
{{< /button >}}

{{< toast id="toast-example-1" header="First title" >}}
    This is the first toast message.
{{< /toast >}}

{{< toast id="toast-example-2" header="Second title" >}}
    This is the second toast message.
{{< /toast >}}

Arguments

The shortcode supports the following arguments:

Configuration

See the message section of the layout configuration to modify the placement of the toast messages.