Notification
A toast notification with timer and progress.
headline is required. delay sets the dismiss delay; disableTimer and disableProgressBar change behavior.
Live example
Example controls
Usage
'use client';
import { Button, Notification } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button onClick={() => setOpen(true)}>Show notification</Button>
<Notification
headline='Saved'
open={open}
onOpenChange={setOpen}
>
Changes saved.
</Notification>
</>
);
}Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
headline | string | Notification heading. | — |
children | string | Notification message. | — |
icon | SvgTypenone · check · search · user | Notification icon. | — |
iconClassName | string | Class of the notification icon. | — |
open | boolean | Controlled notification visibility. | — |
defaultOpen | boolean | Initial visibility when uncontrolled. | false |
top | number | Top offset of the notification in pixels. | 0 |
delay | number | Time before auto-dismiss in milliseconds. | 5000 |
disableTimer | boolean | Disables auto-dismiss. | false |
disableProgressBar | boolean | Hides the timer progress bar. | false |
disableTimerPauseOnHover | boolean | Timer does not pause on hover. | false |
disableCloseByClickInsideAnywhere | boolean | Prevents dismissing by clicking inside. | false |
animationDuration | number | Animation duration in milliseconds. | 200 |
isMouseInside | boolean | External control of hover state. | — |
closeButtonAriaLabel | string | Accessible name of the close button. | Close notification |
onClick | () => void | Click handler inside the notification. | — |
onOpenChange | (open, id?) => void | Called when visibility changes. | — |
onClose | (open: boolean, id?: string) => void | Called after closing. | — |
id | string | Notification identifier. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.