<div class="docs-content" data-render>
# dp-toast

A transient notification host. It stacks short messages in the bottom-right corner and fades
each one out. `Application.js` creates a single instance, reachable as `app.toast`.

Source: `static/js/components/AppToast.js`.

## Methods

| Method | Description |
|---|---|
| `show(message, options)` | Display `message`. Options: `type` (`info`, `success`, `warning`, `error`; default `info`), `ms` (lifetime in milliseconds, default `3000`), and either `url` (navigate on click) or `onClick` (handler) to make the toast clickable. Returns the toast element. |

## Usage

```html
&lt;dp-toast&gt;&lt;/dp-toast&gt;
```

```javascript
app.toast.show("Saved", { type: "success" });
app.toast.show("Something went wrong", { type: "error", ms: 5000 });
```

The element renders nothing until `show` is called.
</div>

<div class="component-demo">
    <div class="component-demo-title">Live example</div>
    <div class="component-demo-stage">
        <button type="button" class="btn btn-secondary" data-toast="info">Info</button>
        <button type="button" class="btn btn-primary" data-toast="success">Success</button>
        <button type="button" class="btn btn-danger" data-toast="error">Error</button>
    </div>
    <dp-toast id="toast-demo"></dp-toast>
</div>
<script type="module">
    import "{{ static_url('/static/js/components/AppToast.js') }}";
    const toast = document.getElementById("toast-demo");
    const messages = { info: "Heads up", success: "Saved", error: "Something went wrong" };
    document.querySelectorAll("[data-toast]").forEach((btn) => {
        btn.addEventListener("click", () => {
            const type = btn.getAttribute("data-toast");
            toast.show(messages[type], { type });
        });
    });
</script>
