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

PropType / variantsPurposeDefault
headlinestringNotification heading.—
childrenstringNotification message.—
iconSvgTypenone · check · search · userNotification icon.—
iconClassNamestringClass of the notification icon.—
openbooleanControlled notification visibility.—
defaultOpenbooleanInitial visibility when uncontrolled.false
topnumberTop offset of the notification in pixels.0
delaynumberTime before auto-dismiss in milliseconds.5000
disableTimerbooleanDisables auto-dismiss.false
disableProgressBarbooleanHides the timer progress bar.false
disableTimerPauseOnHoverbooleanTimer does not pause on hover.false
disableCloseByClickInsideAnywherebooleanPrevents dismissing by clicking inside.false
animationDurationnumberAnimation duration in milliseconds.200
isMouseInsidebooleanExternal control of hover state.—
closeButtonAriaLabelstringAccessible name of the close button.Close notification
onClick() => voidClick handler inside the notification.—
onOpenChange(open, id?) => voidCalled when visibility changes.—
onClose(open: boolean, id?: string) => voidCalled after closing.—
idstringNotification identifier.—
classNamestringClass of the root element.—

Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.