Design
llms.txt digitalcrew.tech

Feedback

Toaster

Toast notifications (Sonner) on the popover surface with a border and radius-lg; mount one Toaster at the root and call toast() from anywhere.

MaxFeedbackDigitalCrew.Toaster
Toaster · liveOpen

Guidelines#

Use it for confirming what just happened and offering the next step: "Campaign launched", "3 drafted replies waiting for review — Review". Errors that need a decision go inline or in a dialog.

What you provide: toast.success | error | warning | info | loading(title, { description, action }). Titles report the outcome, not the effort ("Data found for 63 of 100 contacts", not "Enrichment complete"); errors say what failed and what happens next ("Couldn't save — Google rejected the change" / "We'll retry in a minute").

Facts#

GroupFeedback
ProductMax
Globalwindow.DigitalCrew.Toaster
Sourcemax-agent: src/components/ui/sonner.tsx
Import in the appimport { Toaster } from "@/components/ui/sonner";

API#

TypeScript declarations emitted from src/components/ui/sonner.tsx (the module also exports its other parts).

declare const Toaster: ({ ...props }: ToasterProps) => JSX.Element;
export { Toaster };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  React.useEffect(function () {
    DC.toast.success("Campaign launched", { description: "214 prospects enter step 1 at 09:00." });
    setTimeout(function () { DC.toast("3 drafted replies waiting for review", { action: { label: "Review", onClick: function () {} } }); }, 150);
  }, []);
  return h("div", { className: "flex flex-wrap gap-2" },
    h(DC.Button, { variant: "outline", onClick: function () { DC.toast.error("Couldn't save — Google rejected the change", { description: "We'll retry in a minute." }); } }, "Error"),
    h(DC.Button, { variant: "outline", onClick: function () { DC.toast.warning("Out of AI credits", { description: "Add credits to keep drafting." }); } }, "Warning"),
    h(DC.Toaster, { position: "bottom-right" }));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
AlertAnimatedCircularProgressBarHelpTooltipProgressSkeleton