Toast
A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
Installation
CLI
Manual
npx hq-kit add toast
First, in your root app component or layout, import the Toast component.
import { ToastProvider } from '@/components/ui'
const Layout = ({ children }: { children: React.ReactNode }) => {
return (
<>
<ToastProvider />
{children}
<>
)
}
Basic
Use the toast()
function to show a toast.
Preview
Code
Description
Preview
Code
Status
Preview
Code
Action
Preview
Code
Manually Close
Just pass the timeout: 0
option.
Preview
Code