Notifications

The Notifications component shows notifications on a specified position on the screen.

Position

Bottom Left

Bottom Center

Top Center

---

Usage

import { Notifications, RadioGroup } from "@newfold/ui-component-library";

const [position, setPosition] = useState("bottom-left");

<RadioGroup
    id="notifications-demo-radio-group"
    label="Position"
    value={position}
    onChange={(value) => setPosition(value)}
    options={[
        { label: "Bottom Left", value: "bottom-left" },
        { label: "Bottom Center", value: "bottom-center" },
        { label: "Top Center", value: "top-center" },
    ]}
    variant="inline-block"
/>

<Notifications position={position}>
    <Notifications.Notification
        id="notifications-demo-item"
        dismissScreenReaderLabel="Dismiss"
        title="Notification title"
        description="Notification description"
        onDismiss={(id) => console.log('Dismissed:', id)}
    />
</Notifications>

The Notifications component serves as a container for Notifications.Notification sub-components. The Notifications.Notification sub-component is used to display a single notification. When used together (like the example above), the notification toast will be rendered on the screen in the desired position.

---

Notifications Props

Attribute	Type	Description	Default
children	node |	The content of the notifications context.	-
position	bottom-left | bottom-center | top-center |	The position of the notifications.	bottom-left

---

Notifications.Notification

The Notifications.Notification sub-component is used to display a single notification. When used in isolation from the Notifications component, the notification toast will be rendered inline.

<Notifications.Notification
    id="notification-demo-item"
    dismissScreenReaderLabel="Dismiss"
    title="Notification title"
    description="Inline notification description"
/>

---

Dismissing Notifications

To make a notification dismissable, you can provide a callback function to the onDismiss prop. The onDismiss function will be called when the user clicks the dismiss button and receives the notification's id as an argument.

<Notifications.Notification
    id="notification-demo-item-dismissible"
    dismissScreenReaderLabel="Dismiss"
    title="Notification title"
    description="Dismissible notification description"
    onDismiss={(id) => console.log('Dismissed:', id)}
/>

---

Auto-dismissing Notifications

To make a notification auto-dismissable, you can provide time in milliseconds to the autoDismiss prop.

// Auto-dismiss after 5 seconds
<Notifications.Notification
    id="notification-demo-item-dismissible"
    dismissScreenReaderLabel="Dismiss"
    title="Notification title"
    description="Dismissible notification description"
    onDismiss={(id) => console.log('Dismissed:', id)}
    autoDismiss={5000}
/>

---

Variants

The Notifications.Notification provides 4 variants: info, warning, success and error.

1. Info (default)

<Notifications.Notification
    id="notification-demo-item-info"
    dismissScreenReaderLabel="Dismiss"
    title="Info notification"
    description="Information: Knowledge is the key to empowerment."
    variant="info"
/>

2. Warning

<Notifications.Notification
    id="notification-demo-item-warning"
    dismissScreenReaderLabel="Dismiss"
    title="Warning notification"
    description="Caution: Proceed with care to avoid potential pitfalls."
    variant="warning"
/>

3. Success

<Notifications.Notification
    id="notification-demo-item-success"
    dismissScreenReaderLabel="Dismiss"
    title="Success notification"
    description="Congratulations! You achieved success."
    variant="success"
/>

4. Error

<Notifications.Notification
    id="notification-demo-item-error"
    dismissScreenReaderLabel="Dismiss"
    title="Error notification"
    description="Error: Unable to proceed without the required input."
    variant="error"
/>

---

Sizes

The Notifications.Notification can be used in 2 sizes: default and large.

1. Default (default)

<Notifications.Notification
    id="notification-demo-item-default"
    dismissScreenReaderLabel="default"
    title="Default size notification"
    description="Information: Knowledge is the key to empowerment."
    size="default"
/>

2. Large

<Notifications.Notification
    id="notification-demo-item-large"
    dismissScreenReaderLabel="Dismiss"
    title="Large size notification"
    description="Information: Knowledge is the key to empowerment."
    size="large"
/>

---

Notifications.Notification Props

Attribute	Type	Description	Default
id*	string |	The id of the notification.	-
dismissScreenReaderLabel*	string |	The screen reader label for the dismiss button.	-
title	string |	-	-
description	string |	Notification description.	-
children	node |	The content of the notification. If passed, will override description.	-
variant	info | warning | success | error |	The variant of the notification.	info
size	default | large |	The size of the notification.	default
onDismiss	function |	A function that is fired when the notification is dismissed. It receives the id of the dismissed notification as an argument.	-
autoDismiss	number |	Milliseconds for Notification to disappear.	-