Alert Component Showcase

Introduction

The Alert component is a versatile notification component that can be used to display different types of messages such as success, error, warning, and info. Below you will find examples of how to use the Alert component in various scenarios.

Usage Examples

Success Alert

Your action was successful!

Error Alert

Something went wrong. Please try again.

Warning Alert

Please be aware of the following changes.

Info Alert

This is an informational alert.

Code Snippet


import Alert from './Alert';

const ExamplePage = () => {
  const [showAlert, setShowAlert] = useState(true);

  const handleClose = () => {
    setShowAlert(false);
  };

  return (
    <div className="p-8">
      {showAlert && (
        <Alert
          type="success"
          message="Your action was successful!"
          onClose={handleClose}
        />
      )}
    </div>
  );
};

export default ExamplePage;