Toast
A succinct message that is displayed temporarily, providing brief feedback about an operation.
Live Demo
Click a button below to trigger each toast variant.
Props: Toast
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'success' | 'warning' | 'error' | 'info' | 'default' | Visual style of the toast, conveying intent. |
duration | number | 4000 | Duration in milliseconds before the toast auto-dismisses. |
title | string | — | Bold heading text displayed at the top of the toast. |
description | string | — | Supporting text displayed below the title. |
Usage
// 1. Add <Toaster /> once at the app root (e.g. layout.tsx)
import { Toaster } from '@ghiberti85/ui'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Toaster />
</body>
</html>
)
}
// 2. Use the hook in any client component
'use client'
import { useToast, Button } from '@ghiberti85/ui'
export function MyComponent() {
const { toast } = useToast()
return (
<Button onClick={() => toast({
title: 'Saved!',
description: 'Your changes have been saved.',
variant: 'success',
})}>
Save
</Button>
)
}