Sonner

Toast provider wrapping svelte-sonner. Mount the Toaster once at the app root, then call toast() from anywhere for stacked notifications that lift in from the edge of the viewport.

API Reference Component Source

Mount the provider

Render <Toaster /> once — ideally in +layout.svelte. Bloom's wrapper tracks the data-theme attribute on <html> and swaps status icons for the Remix set (the -line glyphs).

The Toaster is already mounted on this page.

+layout.svelte

<script lang="ts">
	// app root (+layout.svelte or app shell)
	import { Toaster } from '$lib/components/ui/sonner';
</script>

<Toaster />

Variants

Five top-level calls. Each accepts a string or an options object with description, action, and duration.

toast-variants.svelte

<script lang="ts">
	import { Button } from '$lib/components/ui/button';
	import { toast } from 'svelte-sonner';
</script>

<Button variant="secondary" size="sm" onclick={() => toast('Components synced', {
	description: 'Pulled 48 primitives from the registry.'
})}>Default</Button>
<Button variant="secondary" size="sm" onclick={() => toast.success('Deployment ready', {
	description: 'bloom-nx went live in 42s.'
})}>Success</Button>
<Button variant="secondary" size="sm" onclick={() => toast.error('Sync failed', {
	description: 'Registry returned 500. Try again in a minute.'
})}>Error</Button>
<Button variant="secondary" size="sm" onclick={() => toast.info('Running check', {
	description: 'svelte-check is validating types.'
})}>Info</Button>
<Button variant="secondary" size="sm" onclick={() => toast.warning('Unsaved changes', {
	description: 'Your edits are still in the draft buffer.'
})}>Warning</Button>

With action

Pass action to render a trailing button — useful for undo, retry, or view-more flows.

toast-action.svelte

<Button onclick={() =>
	toast('Workspace archived', {
		action: {
			label: 'Undo',
			onClick: () => toast.success('Archive undone')
		}
	})}>Archive workspace</Button>

Promise

toast.promise shows a spinner while the work runs, then morphs into success or error when the promise settles — no manual id juggling.

toast-promise.svelte

<Button onclick={() => {
	const work = new Promise((resolve) => setTimeout(resolve, 1800));
	toast.promise(work, {
		loading: 'Publishing release…',
		success: 'Release v2.1.0 published',
		error: 'Publish failed'
	});
}}>Publish release</Button>

Rich colors

Enable per-toast via richColors: true in options, or globally via the richColors prop on <Toaster />. Tinted with the bloom-nx status palette — success / error / warning / info — using their -muted companions for surface and a 20%-alpha edge for the border.

toast-rich-colors.svelte

<Button variant="secondary" size="sm" onclick={() =>
	toast.success('Deployment ready', {
		description: 'bloom-nx went live in 42s.',
		richColors: true
	})}>Success (rich)</Button>
<Button variant="secondary" size="sm" onclick={() =>
	toast.error('Sync failed', {
		description: 'Registry returned 500.',
		richColors: true
	})}>Error (rich)</Button>
<Button variant="secondary" size="sm" onclick={() =>
	toast.warning('Unsaved changes', {
		description: 'Your edits are still in the draft buffer.',
		richColors: true
	})}>Warning (rich)</Button>
<Button variant="secondary" size="sm" onclick={() =>
	toast.info('Running check', {
		description: 'svelte-check is validating types.',
		richColors: true
	})}>Info (rich)</Button>

Toaster props

Inherits every prop from svelte-sonner's Toaster. Bloom's wrapper sets theme, status icons, and popover-tinted surface automatically.

Type	Default	Description
`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-right'`	Screen corner the toast stack anchors to.
`boolean`	`false`	Tint success/error/warning/info toasts with their status color instead of neutral surface.
`boolean`	`false`	Show a close affordance on each toast.
`boolean`	`false`	Expand the stack on hover.
`number`	`4000`	Default auto-dismiss in ms. Override per-toast via the options arg.

toast() calls

Call from anywhere after the Toaster is mounted. Each variant accepts a string or an options object with description, action, and duration.

Type	Default	Description
`(message, options?) => toastId`	—	Neutral toast.
`(message, options?) => toastId`	—	Success variant — check-circle icon.
`(message, options?) => toastId`	—	Error variant — warning-octagon icon, destructive tint with richColors.
`(message, options?) => toastId`	—	Neutral info toast with info icon.
`(message, options?) => toastId`	—	Warning toast with warning triangle icon.
`(promise, { loading, success, error }) => toastId`	—	Shows a loading spinner, then morphs into success or error when the promise settles.