Toast
Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.
id. 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 >}}The shortcode supports the following arguments:
| Argument | Required | Description |
|---|---|---|
| id | No | Optional id of the toast message, defaults to toast-message-n with sequence n. |
| header | No | Optional header of the toast message. Uses the site title by default. |
| class | No | Optional class attribute of the toast element. |
See the message section of the layout configuration to modify the placement of the toast messages.