---
title: Toast
description: A succinct message that is displayed temporarily.
---
```templ
package examples
import "github.com/axadrn/shadcn-templ/v2/components/button"
templ ToastDemo() {
@button.Button(button.Props{
Variant: button.VariantOutline,
Attributes: templ.Attributes{"id": "toast-demo-trigger"},
}) {
Show Toast
}
}
```
## Installation
Command
Manual
```bash
shadcn-templ add toast
```
Copy and paste the following code into your project.
Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).
Update the import paths to match your project setup.
Add the `Toaster` component to your base layout.
```templ showLineNumbers title="layout.templ"
import "github.com/axadrn/shadcn-templ/v2/components/toast"
templ Layout() {
{ children... }
@toast.Toaster()
}
```
## Usage
```js showLineNumbers
const id = window.tui.toast.add({
title: "Event created",
description: "Sunday, December 3 at 9:00 AM",
})
```
## Types
Set the `type` option to render a status icon. The built-in renderer recognizes `success`, `info`, `warning`, `error`, and `loading`.
```templ
package examples
import "github.com/axadrn/shadcn-templ/v2/components/button"
type toastTypeDemo struct {
Label string
Type string
Description string
}
var toastTypeDemos = []toastTypeDemo{
{"Default", "", "Event has been created."},
{"Success", "success", "Event has been created."},
{"Info", "info", "Arrive 10 minutes before the event."},
{"Warning", "warning", "The event is almost full."},
{"Error", "error", "Could not create event."},
{"Loading", "loading", "Creating event..."},
}
templ ToastTypes() {
for _, demo := range toastTypeDemos {
@button.Button(button.Props{
Variant: button.VariantOutline,
Attributes: templ.Attributes{
"data-toast-type": demo.Type,
"data-toast-description": demo.Description,
},
}) {
{ demo.Label }
}
}
}
```
## Action
Pass button props with `actionProps` to render an action.
```js showLineNumbers
const id = window.tui.toast.add({
title: "Event created",
actionProps: {
children: "Undo",
onClick() {
window.tui.toast.close(id)
},
},
})
```
## Promise
Use `toast.promise` to update one toast as an asynchronous task moves through loading, success, and error states.
```templ
package examples
import "github.com/axadrn/shadcn-templ/v2/components/button"
templ ToastPromise() {
@button.Button(button.Props{
Variant: button.VariantOutline,
Attributes: templ.Attributes{"id": "toast-promise-trigger"},
}) {
Create Event
}
}
```
## API Reference
### Toaster
The `toast.Toaster` component hosts the toasts, mount it once in your layout.
| Prop | Type | Default |
| --------- | -------- | ------- |
| `Timeout` | `int` | `5000` |
| `Limit` | `int` | `3` |
| `Class` | `string` | - |
### toast
The `window.tui.toast` object is the toast manager pendant.
| Function | Signature | Description |
| --------- | -------------------------------------------- | -------------------------------------------------------- |
| `add` | `(options) => id` | Shows a toast, options carry `title`, `description`, `type`, `timeout` and `actionProps`. |
| `close` | `(id) => void` | Closes a toast. |
| `promise` | `(promise, { loading, success, error }) => id` | Shows a loading toast that morphs with the promise. |
### Toast
The `toast.Toast` component renders a toast server side, e.g. swapped in via htmx.
| Prop | Type | Default |
| ------------- | ------------------------------------------------------------------- | --------- |
| `Title` | `string` | - |
| `Description` | `string` | - |
| `Type` | `TypeSuccess \| TypeInfo \| TypeWarning \| TypeError \| TypeLoading` | - |
| `Timeout` | `int` | inherited |