Toast

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

Overview  

  Important

To support multiple toast messages on the same page, each toast message is explicitly linked to a button using the parameter id since release v0.14.3  . Hinode wraps the individual toast messages in a container to stack them automatically.

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  

Configuration  

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