Toasts

The island that draws the page's one toast stack.

View code

tsx

<div mix={[hstack({ gap: 2, align: "center" })]}>
	<Button
		mix={[
			on("click", () =>
				pageToaster().add({ color: "success", title: "Status page published" }),
			),
		]}
	>
		Publish
	</Button>
	<Button
		color="danger"
		variant="outline"
		mix={[
			on("click", () =>
				pageToaster().add({
					color: "danger",
					title: "Couldn't upload checks.yml",
					description: "Unknown key “retires”. Fix it and try again.",
				}),
			),
		]}
	>
		Upload a bad file
	</Button>
</div>

{/* Once, in the app layout: */}
<Toasts labels={{ region: "Notifications", dismiss: "Dismiss" }} />

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { Toasts } from "@sdxc/ui/app";

The app's one toast stack. A flash toast shows and closes without JavaScript; hydration adopts the same element and only then starts its timer. Reach for a toast last, after an inline message or a banner.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`labels`	`Toast.Labels`	Yes	Strings the region and its close buttons announce.
`initial`	`Toast.Flash[]`	No	Toasts the server rendered from a session flash; hydration adopts each element and starts its timer.
`placement`	`Toast.Placement`	No	Corner of the viewport. Default: `"bottom-end"`.
`max`	`number`	No	Most toasts shown at once. Default: `3`.
`stack`	`Toast.Stack`	No	Peek stack or plain list. Default: `"peek"`.
`queue`	`string`	No	Which `pageToaster()` queue to draw; a page normally has one. Default: `"page"`.