Toast
Install sileo and style it with Aura tokens. Aura does not ship a Toast component.
Aura does not include a Toast component. Apps that need toasts use sileo. Mount <Toaster /> once, then call sileo.
Preview
The preview paints the success and error surfaces with the same fill and text tokens as the sileo options below. Dismiss removes a surface. Show toasts brings them back.
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/Button";
const initial = [
{ id: "saved", tone: "Success", title: "Saved", description: "The care plan is up to date." },
{ id: "error", tone: "Error", title: "Could not save", description: "Check the connection and try again." },
];
export function ToastDemo() {
const [items, setItems] = useState(initial);
return (
<div className="grid w-full max-w-xl gap-1">
{items.map((item) => (
<div key={item.id} role="status" className="flex items-start justify-between gap-1 rounded-sm border border-gray-6 bg-gray-1 p-1">
<div>
<p className="m-0 text-sm text-gray-11">{item.tone}</p>
<p className="m-0 text-gray-12">{item.title}</p>
<p className="m-0 text-gray-11">{item.description}</p>
</div>
<Button type="button" variant="pill" size="sm" onClick={() => setItems((current) => current.filter((entry) => entry.id !== item.id))}>
Dismiss
</Button>
</div>
))}
</div>
);
}Install
pnpm add sileoMount
Put the toaster at the root of the app. offset is 13 so the toast sits on Aura’s spacing grid. theme="system" follows light and dark. fill is the toast surface. styles values are class names.
import { sileo, Toaster } from "sileo";
export function AppToaster() {
return (
<Toaster
position="top-right"
theme="system"
offset={13}
options={{
fill: "var(--gray-1)",
styles: {
title: "text-gray-12",
description: "text-gray-11",
},
}}
/>
);
}Call
sileo.success({
title: "Saved",
description: "The care plan is up to date.",
});
sileo.error({
title: "Could not save",
description: "Check the connection and try again.",
});
const id = sileo.info({ title: "Working", description: "This stays until you dismiss it.", duration: null });
sileo.dismiss(id);sileo also exposes warning, action, promise, and clear. States are success, loading, error, warning, info, and action.
Data grid
DataGrid still imports toast from sonner in DataGridCellVariants.tsx, DataGridContextMenu.tsx, and use-data-grid.ts. That call is unchanged here. The follow-up is to point those three call sites at sileo so the grid and the rest of the app share one toaster.