import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Default() {
const toaster = createToaster({});
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
</script>
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
Usage
This component acts as a Singleton - meaning you only implement a single instance (typically at the root scope of your app) and then reuse it over and over. To do this, implement the <Toast.Group> at the root scope of your app (the root layout), and use a shared createToaster() instance to trigger messages to that group from anywhere in your application.
Type
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Type() {
const toaster = createToaster({});
return (
<>
<div className="grid grid-cols-2 gap-2">
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Info',
description: 'This is an info toast.',
})
}
>
Info
</button>
<button
className="btn preset-filled-success-500"
onClick={() =>
toaster.success({
title: 'Success',
description: 'This is a success toast.',
})
}
>
Success
</button>
<button
className="btn preset-filled-warning-500"
onClick={() =>
toaster.warning({
title: 'Warning',
description: 'This is a warning toast.',
})
}
>
Warning
</button>
<button
className="btn preset-filled-error-500"
onClick={() =>
toaster.error({
title: 'Error',
description: 'This is an error toast.',
})
}
>
Error
</button>
</div>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
</script>
<div class="grid grid-cols-2 gap-2">
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Info',
description: 'This is an info toast.',
})}
>
Info
</button>
<button
class="btn preset-filled-success-500"
onclick={() =>
toaster.success({
title: 'Success',
description: 'This is a success toast.',
})}
>
Success
</button>
<button
class="btn preset-filled-warning-500"
onclick={() =>
toaster.warning({
title: 'Warning',
description: 'This is a warning toast.',
})}
>
Warning
</button>
<button
class="btn preset-filled-error-500"
onclick={() =>
toaster.error({
title: 'Error',
description: 'This is an error toast.',
})}
>
Error
</button>
</div>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
Placement
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Placement() {
const toaster = createToaster({
placement: 'bottom-end',
});
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({
placement: 'bottom-end',
});
</script>
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
Action
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Action() {
const toaster = createToaster({});
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Toast',
description: 'This is a toast message.',
duration: Infinity,
action: {
label: 'Undo',
onClick: () => {
toaster.success({
title: 'Task undone',
description: 'The task has been undone.',
});
},
},
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
{toast.action && <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>}
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
</script>
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Toast',
description: 'This is a toast message.',
duration: Infinity,
action: {
label: 'Undo',
onClick: () => {
toaster.success({
title: 'Task undone',
description: 'The task has been undone.',
});
},
},
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
{#if toast.action}
<Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
{/if}
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
Closable
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Closable() {
const toaster = createToaster({});
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
closable: false,
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
{toast.closable && <Toast.CloseTrigger />}
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
</script>
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
closable: false,
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
{#if toast.closable}
<Toast.CloseTrigger />
{/if}
</Toast>
{/snippet}
</Toast.Group>
Meta
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
import { SkullIcon } from 'lucide-react';
export default function Meta() {
const toaster = createToaster({});
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
meta: {
icon: <SkullIcon className="size-8" />,
},
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
{toast.meta!.icon}
<Toast.Message>
<Toast.Title className="flex gap-2 items-center">{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { SkullIcon } from '@lucide/svelte';
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
</script>
{#snippet skull()}
<SkullIcon class="size-8" />
{/snippet}
<button
class="btn preset-filled"
onclick={() =>
toaster.info({
title: 'Title',
description: 'This is a description.',
meta: {
icon: skull,
},
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
{@render toast.meta!.icon()}
<Toast.Message>
<Toast.Title class="flex gap-2 items-center">{toast.title}</Toast.Title>
<Toast.Description>{toast.description} {toast.meta?.foo}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
Promise
import { Toast, createToaster } from '@skeletonlabs/skeleton-react';
export default function Promise_() {
const toaster = createToaster({});
function generatePositiveNumber() {
return new Promise<number>((resolve, reject) => {
setTimeout(() => {
const number = Math.random() - 0.5;
if (number > 0) {
resolve(number);
} else {
reject(number);
}
}, 2000);
});
}
return (
<>
<button
className="btn preset-filled"
onClick={() =>
toaster.promise(generatePositiveNumber(), {
loading: {
title: 'Loading...',
description: 'Please wait while generating your number',
},
success: (number) => ({
title: 'Success',
description: `Your number is ${number.toFixed(2)}`,
}),
error: (number) => ({
title: 'Error',
description: `Your number is ${(number as number).toFixed(2)}`,
}),
})
}
>
Toast
</button>
<Toast.Group toaster={toaster}>
{(toast) => (
<Toast toast={toast} key={toast.id}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
)}
</Toast.Group>
</>
);
}
<script lang="ts">
import { Toast, createToaster } from '@skeletonlabs/skeleton-svelte';
const toaster = createToaster({});
function generatePositiveNumber() {
return new Promise<number>((resolve, reject) => {
setTimeout(() => {
const number = Math.random() - 0.5;
if (number > 0) {
resolve(number);
} else {
reject(number);
}
}, 2000);
});
}
</script>
<button
class="btn preset-filled"
onclick={() =>
toaster.promise(generatePositiveNumber(), {
loading: {
title: 'Loading...',
description: 'Please wait while generating your number',
},
success: (number) => ({
title: 'Success',
description: `Your number is ${number}`,
}),
error: (number) => ({
title: 'Error',
description: `Your number is ${number}`,
}),
})}
>
Toast
</button>
<Toast.Group {toaster}>
{#snippet children(toast)}
<Toast {toast}>
<Toast.Message>
<Toast.Title>{toast.title}</Toast.Title>
<Toast.Description>{toast.description}</Toast.Description>
</Toast.Message>
<Toast.CloseTrigger />
</Toast>
{/snippet}
</Toast.Group>
API Reference
Root
| Property | Default | Type |
|---|---|---|
toast | - | Options<any> |
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
RootContext
| Property | Default | Type |
|---|---|---|
children | - | Snippet<[() => ToastApi<PropTypes, any>]> |
Group
| Property | Default | Type |
|---|---|---|
toaster | - | ToastStore<any> |
children | - | Snippet<[ToastProps<any>]> | undefined |
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
Message
| Property | Default | Type |
|---|---|---|
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
Title
| Property | Default | Type |
|---|---|---|
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
Description
| Property | Default | Type |
|---|---|---|
element | - | Snippet<[HTMLAttributes<"div">]> | undefinedRender the element yourself |
ActionTrigger
| Property | Default | Type |
|---|---|---|
element | - | Snippet<[HTMLAttributes<"button">]> | undefinedRender the element yourself |
CloseTrigger
| Property | Default | Type |
|---|---|---|
element | - | Snippet<[HTMLAttributes<"button">]> | undefinedRender the element yourself |