Notifications provide a way to communicate important messages or updates to your users. This section covers two types of basic notifications: non-sticky and sticky notifications.
Basic notifications are a simple yet effective way to inform users about important updates or actions they need to take. Whether you choose non-sticky or sticky notifications depends on the urgency and user experience you want to provide. Experiment with different styles and messages to create notifications that enhance your application's usability.
Success notifications are a way to provide positive feedback to users when they perform actions successfully. This section demonstrates how to create and use success notifications.
Success notifications play a vital role in enhancing the user experience by providing immediate feedback on successful actions. They help users understand that their actions were completed successfully, increasing their confidence in your application. Consider using success notifications for actions like saving data, completing tasks, or successful submissions. Customize the message and style to align with your application's branding and user expectations.
Notifications with actions allow you to provide users with clear options to take after receiving a notification. This section demonstrates how to create and use notifications with actions.
Notifications with actions are a powerful way to engage users and guide them on the next steps they can take. These notifications are particularly useful for critical alerts or situations where user interaction is required. By providing clear and relevant action buttons, you can help users make informed decisions and take appropriate actions. Customize the message, icons, and actions to match your application's requirements and user needs.
Notifications with avatars allow you to personalize notifications by including user avatars or profile pictures. This section demonstrates how to create and use notifications with avatars.
Notifications with avatars add a personal touch to your notifications, making them more engaging and relatable to users. You can use avatars to identify the sender or source of the notification, creating a more user-friendly and interactive experience. Customize the avatar, user information, and message to match your application's context and user interactions.
Notifications with split buttons allow you to provide multiple action options within a single notification. This section demonstrates how to create and use notifications with split buttons.
Notifications with split buttons enhance user interaction by offering multiple actions within a single notification. This feature is useful for providing users with choices or quick access to relevant actions without cluttering the notification interface. Customize the buttons and actions to suit your application's needs and provide a seamless user experience.
Notifications with buttons below allow you to include action buttons directly beneath the notification content. This section demonstrates how to create and use notifications with buttons below.
Notifications with buttons below enhance user engagement by placing actionable buttons directly beneath the notification message. This design allows users to quickly respond or take specific actions related to the notification's content. Customize the buttons and content to suit your application's needs and provide a seamless user experience.
In this section, you will find detailed information about the available props, classes, and options that can be used with the component. Understanding these properties is essential for customizing and configuring the component to suit your specific requirements.
Below is a list of props that can be passed to the component:
| Prop | Type | Description |
|---|---|---|
| `options` | `Options` | An object containing options for configuring the notification behavior. Explore all the available APIs through the following helpful documentation links https://apvarun.github.io/toastify-js/ . |
| `getRef` | `(el: NotificationElement) => void` | A callback function to receive a reference to the NotificationElement. |
