variant
"brand" | "neutral" | "error" | "success"
"neutral"
icon
IconName
"FeatherInfo"
title
string
"A toast message"
description
string
"Additional details"
actions
React.ReactNode
Add <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} />