All components
Toast
Transient notifications with indicator, title, description, action, and close slots.
Install
zsh — toast
1bunx stylexblocks add toastUsage — Base UI
toast.tsx
1234567891011121314151617181920212223242526272829import { Toast, Toaster } from "#components/ui/base-ui/toast.tsx";
// Base UI's real toast manager: wrap the app in Toast.Provider, mount// <Toaster /> once, and queue toasts with Toast.useToastManager().function SaveButton() { const manager = Toast.useToastManager(); return ( <button onClick={() => manager.add({ title: "Changes saved", description: "Your theme has been published.", type: "success", }) } > Save </button> );}
export function App() { return ( <Toast.Provider> <SaveButton /> <Toaster /> </Toast.Provider> );}