# Toast
Display brief messages to users.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Default() {
const toaster = createToaster();
return (
<>
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
## Usage
This component acts as a Singleton. Implement a single instance of `` in the root scope your application.
```tsx
import { toaster } from '/some/path/toaster.ts';
import { Toast } from '@skeletonlabs/skeleton-react';
import type { PropsWithChildren } from 'react';
export default function Layout(props: PropsWithChildren) {
return (
<>
{props.children}
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
Create a shared reference to the `createToaster()` instance. We'll call it `toaster` here.
```ts
```
Use this shared reference to trigger messages on demand throughout your application.
```tsx
import { toaster } from '/some/path/toaster.ts';
export default function Page() {
function onClickHandler() {
toaster.info({ title: 'Example', description: 'This is a toast message.' });
}
return ();
}
```
```tsx
import { toaster } from '/some/path/toaster.ts';
export default function Page() {
function onClickHandler() {
toaster.info({ title: 'Example', description: 'This is a toast message.' });
}
return ();
}
```
## Triggers
Shorthand methods are available for toast triggers, including: `info()`, `success()`, `warning()`, and `error()`.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Type() {
const toaster = createToaster();
return (
<>
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
Or use the generic `create()` method to trigger toasts of any type: `info|success|warning|error`.
```ts
toaster.create({
type: 'info',
title: 'This is a toast',
description: 'This is a toast description.',
duration: 4000, // Duration in milliseconds (default: 4000), use Infinity to prevent auto-close
action: {
label: 'Action',
onClick: () => {
// Handle action click
},
},
});
```
## Placement
Set the `placement` value in your `createToaster` instance to define the global screen position.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Placement() {
const toaster = createToaster({
placement: 'bottom-end',
});
return (
<>
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
## Overlap
Use the `overlap` option in your `createToaster` instance to enable overlapping toasts.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Default() {
const toaster = createToaster({
overlap: true,
});
return (
<>
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
> Note: Hovering over the toast group will expand all the toasts.
## Closable
Use the `closable` prop to toggle display of the close button.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Closable() {
const toaster = createToaster();
return (
<>
{(toast) => (
{toast.title}{toast.description}
{toast.closable && }
)}
);
}
```
## Action
Use the `action` key to add an interactive button to your toast. This is useful for actions like "Undo", "Retry", or other contextual operations.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Action() {
const toaster = createToaster();
return (
<>
{(toast) => (
{toast.title}{toast.description}
{toast.action && {toast.action.label}}
)}
);
}
```
## Meta
Use the `meta` key to pass arbitrary data along with the toast instance. This can be used to display an icon for example.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';
export default function Meta() {
const toaster = createToaster();
return (
<>
{(toast) => (
{toast.meta!.icon}
{toast.title}{toast.description}
)}
);
}
```
## Promise
Toasts support asynchronous updates using promises.
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Promise_() {
const toaster = createToaster();
function generatePositiveNumber() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const number = Math.random() - 0.5;
if (number > 0) {
resolve(number);
} else {
reject(number);
}
}, 2000);
});
}
return (
<>
{(toast) => (
{toast.title}{toast.description}
)}
);
}
```
## Anatomy
Here's an overview of how the Toast component is structured in code:
```tsx
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference