# 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 Added in 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.

```markdown
{{< 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 >}}
```

## Configuration

Added in v0.14.4

By default, toast messages are displayed in the bottom right of the viewport. Hinode vertically stacks multiple toast messages automatically. Adjust the configuration by adjusting `messages` in the `site parameters`.

```toml
[messages]
    placement = "bottom-right"
```

The following arguments are supported:

| Setting     | Default        | Description                                                                                                                                                                                                          |
|-------------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `placement` | "bottom-right" | Optional position of the toast messages relative to the viewport: "top-left", "top-center","top-right", "middle-left", "middle-center", "middle-right", "bottom-left", "bottom-center", or "bottom-right" (default). |

## Styling

The file `assets/scss/components/_toast.scss` defines the Hinode-specific styling of the `toast` shortcode. Check the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/components/toasts/#css) for additional styling options.

```scss
.toast {
    border-radius: #{$theme-border-radius};
    overflow: hidden;
}
```

## Arguments

The shortcode supports the following arguments:

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `class` | string |  |  | Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element. |
| `id` | string |  |  | Unique identifier of the current element. |
| `title` | string |  |  | Title of the element. If the element references a (local) page, the title overrides the referenced page's title. |