Notification

The Notification component is a versatile and customizable UI element designed to display brief, important messages to users. These notifications can serve various purposes, such as providing feedback on user actions, displaying system messages, or alerting users to important information. The component offers a wide range of properties to tailor its appearance and behavior, ensuring it can fit seamlessly into any application's design.

Import

To utilize the Notification prop, import it from @vivakits/react-components

import { VKNotifications, useVKNotifications } from "@vivakits/react-components";

Variant

The variant prop specifies the variant of the notification, which can dictate its appearance and style. The Notification component comes with 4 different variants, default success warning error, each with its own color scheme and icon, that can be changed using the variant prop inside the notify function.

Color

The color prop overrides the default color of the notification. This can be used to apply a custom color that matches the application's design or to highlight specific notifications.The Notification component comes with 8 different colors that you can change using the color prop inside the notify function.

Size

The size prop determines the size of the notification. Options include 6 different sizes allowing the notification to fit different spaces within the application layout. The component size can be changed using the size prop inside the notify function.

Placement

Specifies where on the screen the notification should appear. Common placements include top-right top-left bottom-right and bottom-left. This allows notifications to be shown in the most appropriate location based on the context. Notification component comes with 4 different placements that can be changed using the placement prop inside the notify function.

Close notification

The autoClose prop determines whether the notification should automatically close after a certain duration. If set to false, the notification will remain visible until manually closed. If autoClose is set to true, the duration for the notification to be visible can be controlled using the duration prop. The duration is in millisecond.

Example

Below are examples of how notification can be used in various circumstances.

API Reference