Skip to main content
Skip table of contents

Alert

Overview

When the product recognizes a security event or circumstance, the Alert component monitors event-based security activity and generates one or more configured actions (external alerts). You can respond instantly to urgent situations or events by processing alerts. The Alert component can produce any of the following actions such as Email, WTO, and SYSPRINT.

You need to drop and drag Dialog first, then you can create Alert and AlertTitle.

Please refer to this for more information: https://mui.com/material-ui/react-alert/#main-content.

Import

CODE
import { Dialog, Alert } from '@mui/material';

The above source will be imported automatically after dragging and dropping Basic Component to the UI Preview Panel.

Property

Property:

Name

Default

Description

Id-name

Placeholder: <id-name>

The Id-name of the created component.

Default Style

Severity: Success

The Default Style of the created component includes Severity.

State

State: Normal

The State of the created Component.

Margin and Padding

Size Unit: Px

The component Margin and Padding with many selectable Size Units.

Layout

Position: relative

The component Layout includes Position and Top - Right - Bottom - Left with many selectable Size Units.

Text

Font-family: None

Font-weight: None

Text-align: Left

The component Text includes Font-family, Font-size, Font-weight, Font-color, Text-align.

General

Visibility: None

Opacity: 100%

The component General set up including Visibility, Opacity, and Background.

Advanced Style

The component Advanced Style includes Classname and Inline Style addition.

Code Sample:

CODE
<Alert severity="error">
  <AlertTitle>Error</AlertTitle>
  This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
  <AlertTitle>Warning</AlertTitle>
  This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
  <AlertTitle>Info</AlertTitle>
  This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
  <AlertTitle>Success</AlertTitle>
  This is a success alert — <strong>check it out!</strong>
</Alert>

Related Components:

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.