Docs
Toast
Toast
A succinct message that is displayed temporarily.
Installation
npx shadcn-solid@latest add toast
Usage
import { toaster } from "@kobalte/core"
import {
Toast,
ToastContent,
ToastProgress,
ToastTitle,
} from "@/components/ui/toast"
toaster.show((props) => (
<Toast toastId={props.toastId}>
<ToastContent>
<ToastTitle>Toast</ToastTitle>
</ToastContent>
<ToastProgress />
</Toast>
))
import { ToastList, ToastRegion } from "@/components/ui/toast"
const App = () => {
return (
<Router
root={(props) => (
<Suspense>
<ColorModeScript />
<ColorModeProvider>
{props.children}
<ToastRegion>
<ToastList />
</ToastRegion>
</ColorModeProvider>
</Suspense>
)}
>
<FileRoutes />
</Router>
)
}
export default App