ant-design
  1. ant-design-notification

Ant Design Notification Page

Ant Design Notification is a UI component provided by Ant Design framework. It allows you to show messages or notifications to users when something important happens on your website or app.

Syntax

notification[type]({
  message: 'Notification Title',
  description: 'Description text',
  duration: timeInSeconds,
  ...
});

The type parameter can be one of the following values: success, info, warning, and error.

Use and Importance

Notifications are an important way to inform users of important actions or events that have occurred on your website or app. They can be used for a variety of purposes, such as:

  • Confirming a user action, such as a successful form submission or purchase confirmation
  • Alerting users to errors or issues that need attention, such as an invalid input or server error
  • Providing updates on ongoing processes, such as file uploads or downloads

Ant Design Notification makes it easy to create and customize notifications that align with your brand and user experience.

Example

import { notification } from 'antd';

const openNotification = () => {
  notification.open({
    message: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    onClick: () => {
      console.log('Notification Clicked!');
    },
  });
};

<Button type="primary" onClick={openNotification}>
  Open the notification box
</Button>

Summary

Ant Design Notification is a powerful and flexible component that allows you to create and customize notifications for your website or app. With its simple syntax and customizable options, you can easily create notifications that align with your brand and messaging. Whether you're confirming a user action, alerting users to errors, or providing updates on ongoing processes, Ant Design Notification is an essential tool for any web developer.

Published on: