
variant"brand" | "neutral" | "error" | "success""neutral"iconIconName<FeatherInfo />titlestring"A toast message"descriptionstring"Additional details"actionsReact.ReactNodeAdd <Toaster /> to the root of your app.
import { Toaster } from "@subframe/core" function App() { return ( <> <Toaster /> {/* Rest of your app... */} </> ) }
and then import the toast function wherever you need to launch a toast.
import { toast } from "@subframe/core"
Use toast.custom(() => <Toast />) to launch the toast.
View code
Use icon, title, and description props to customize the toast.
View code
Use position to customize the toast location.
<Toaster position="top-left" /> <Toaster position="top-center" /> <Toaster position="top-right" /> <Toaster position="bottom-left" /> <Toaster position="bottom-center" /> <Toaster position="bottom-right" />
Use visibleToasts to customize the number of toasts shown.
<Toaster visibleToasts={7} />