AlertTitle

Overview

Alert Title is a short description of the reason for the alert. It is used to launch an alert dialog with the specified title and message.

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

Import

CODE

import { Alert, AlertTitle } 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.
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: None Size Unit: Px	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 Component

Alert