hinode/content/en/docs/0.8/components/toast.md

author, title, date, description, group, layout

author	title	date	description	group	layout
Mark Dumay	Toast	2023-01-05	Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen.	components	docs

Overview

Use the toast shortcode to display a dismissable message in the bottom-right corner of the screen. Hinode defines a click event for a button with id toastButton. Modify the file assets/js/toast.js if needed.

Arguments

The shortcode supports the following arguments:

Argument	Required	Description
header	No	Optional header of the toast message. Uses the site title by default.
{.table}

Example

As an example, the following shortcode displays a button that, when clicked, triggers the toast message.

{{</* button id="toastButton" */>}}
Show toast
{{</* /button */>}}

{{</* toast */>}}
This is a toast message.
{{</* /toast */>}}

The result looks like this:

{{< button id="toastButton" >}} Show toast {{< /button >}}

{{< toast >}} This is a toast message. {{< /toast >}}