Skip to content

AlertMessage Component

Description

The AlertMessage component is a wrapper around the Alert component that provides automatic dismissal for non-error messages.

Props

Prop Type Default Description
open boolean false Controls whether the alert is visible.
severity "success" , "info" , "warning" , "error" "info" Defines the severity of the alert.
message string "" The text displayed inside the alert.
onClose () => void undefined Callback function triggered when the alert is closed.

Behavior

  • If the severity is not error, the alert will automatically close after 3 seconds.
  • Clicking the close button will manually dismiss the alert.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { AlertMessage } from "@nomana-it/liberty-core"
import { useState } from "react";

export const AlertMessageExample = () => {
  const [open, setOpen] = useState(true);

  return (
    <div>
      <AlertMessage open={open} severity={ESeverity.success} message="This is a success alert!" onClose={() => setOpen(false)} />
      <AlertMessage open={true} severity={ESeverity.info} message="This is an info alert!" onClose={() => console.log("Closed")} />
      <AlertMessage open={true} severity={ESeverity.warning} message="This is a warning alert!" onClose={() => console.log("Closed")} />
      <AlertMessage open={true} severity={ESeverity.error} message="This is an error alert!" onClose={() => console.log("Closed")} />
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core