Overview
Forms & inputs
Design Systemv1.3.0Search documentation
Search for a command to run or a page to navigate to.
Design Systemv1.3.0Search for a command to run or a page to navigate to.
"use client"
import { Button } from "@strongtie/design-system/button"
import { toast } from "sonner"
export function ToasterDefault() {
return (
<div className="flex flex-wrap gap-2">
<Button
variant="outline"
onClick={() => {
const toastRef = toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
})
console.log(toastRef)
}}
>
Show Toast
</Button>
<Button
variant="outline"
onClick={() => toast.success("Event has been created successfully")}
>
Success
</Button>
<Button
variant="outline"
onClick={() => toast.error("There was an error creating the event")}
>
Error
</Button>
<Button
variant="outline"
onClick={() =>
toast("Are you sure?", {
description: "This action cannot be undone.",
action: {
label: "Confirm",
onClick: () => toast.success("Action confirmed"),
},
cancel: {
label: "Cancel",
onClick: () => toast.info("Action cancelled"),
},
})
}
>
With Actions
</Button>
<Button
variant="outline"
onClick={() => {
const promise = new Promise((resolve) =>
setTimeout(() => resolve({ name: "John Doe" }), 2000)
)
toast.promise(promise, {
loading: "Loading...",
success: (data: any) => `${data.name} has been added`,
error: "Error",
})
}}
>
Promise
</Button>
</div>
)
}
import { Toaster } from "@strongtie/design-system/toaster"Not installed yet? Add the package to your app:
npm install @strongtie/design-system
All components accept standard HTML attributes and React props.