Toast
StableTemporary notification messages with automatic dismiss.
Import
import { ToastProvider, useToast } from '@brutal-ui/react';Setup
Wrap your app with ToastProvider at the root level:
import { ToastProvider } from '@brutal-ui/react';
function App() {
return (
<ToastProvider>
{/* Your app content */}
</ToastProvider>
);
}Basic Usage
import { useToast } from '@brutal-ui/react';
function MyComponent() {
const { addToast } = useToast();
return (
<Button
onClick={() =>
addToast({
message: 'Operation successful!',
type: 'success'
})
}
>
Show Toast
</Button>
);
}Toast Types
Success: For positive confirmations
Error: For failures or problems
Warning: For cautionary messages
Info: For general information
Props
| addToast Options | |||
|---|---|---|---|
| Option | Type | Default | Description |
| message | string | - | Toast message text |
| type | string | "info" | success | error | warning | info |
| duration | number | 3000 | Duration in milliseconds |