how to make alert with close icon using ant design in react js?

Solution

To make an alert with a close icon using ant design in react js, first install the ant design library using the npm install antd command and install the ant design icon library using the npm install --save @ant-design/icons command then import Alert and closeable a boolean property whose value is set to true. which means the user can turn off the alert.

Snippet

In this snippet, see the short example of antd Alert component with the closeable attribute.

<Alert
  message="Success Text"
  type="success"
  showIcon
  closable
  style={{
    margin: "30px"
  }}
/>

Example

In this example, we will import the alert component from the antd library, and use the closeable attribute to make the Alert component with a close icon and when the user clicks on the icon alert will disappear.

Let’s start coding…

App.js

import * as React from "react";
import { Alert } from "antd";

export default function ComboBox() {
  return (
    <Alert
      message="Success Text"
      type="success"
      showIcon
      closable
      style={{
        margin: "30px"
      }}
    />
  );
}

Output

Links

Here, we are provided code sandbox links for the above program make alert with close icon using ant design. Then you can use whenever you went and do the changes as per your requirements.

codesandbox

Happy Coding,

I hope the above example with help you to do your task.