Docs
Toast
Posted on August 14, 2024 (Last modified on June 20, 2025) • 2 min read • 351 wordsUse 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-id="toast-example-1" >}}
Show toast 1
{{< /button >}}
{{< button toast-id="toast-example-2" >}}
Show toast 2
{{< /button >}}
{{< toast id="toast-example-1" title="First title" >}}
This is the first toast message.
{{< /toast >}}
{{< toast id="toast-example-2" title="Second title" >}}
This is the second toast message.
{{< /toast >}}
Arguments
Name | Type | Required | Default | Comment |
---|---|---|---|---|
class | string | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | ||
header | string |
v1.0.0
Use title instead. Header of the toast message. Uses the site title by default. |
||
id | string | Unique identifier of the current element. | ||
title | string, hstring.RenderedString, hstring.HTML, template.HTML | v1.0.0 Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. |
Name | Type | Required | Default |
---|---|---|---|
class | string | ||
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. | |||
header | string | ||
v1.0.0
Use title instead. Header of the toast message. Uses the site title by default. |
|||
id | string | ||
Unique identifier of the current element. | |||
title | string, hstring.RenderedString, hstring.HTML, template.HTML | ||
v1.0.0 Title of the element. If the element references a (local) page, the title overrides the referenced page’s title. |
Configuration
See the message section of the layout configuration to Modify the Placement of the Toast Messages.