Skip to main content

Alert

The Alert component displays a brief, important message to attract the user's attention without interrupting their work.

Properties

NameTypeDefaultDescription
textstringThe message text to display in the alert.
iconboolfalseIf true, overrides the default icon displayed on the alert.
actionButtonboolfalseIf true, will display an action button after the alert message.
closeTextstringOverride for the close label on the popup icon button.

Style Attributes

NameTypeDefaultDescription
variantfilled
outlined
standard
string
standardDefines the display type to use.
severityerror
info
success
warning
string
successThe level of importance of the alert. A default color and icon are set based on the severity.

Subcomponents

The Alert component uses a subcomponent to create an alert title. Two optional subcomponents provide an icon and an action button for the alert component.

Alert Title

The Alert Title component provides a title for the alert.

Properties

NameTypeDefaultDescription
titlestringThe title of the alert.

Icon

Allows the user to add an icon to the alert component.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

Button

Allows the user to add an action button to the alert.

For further details, see the Button component.

Properties

NameTypeDefaultDescription
textstringThe text label for the button face.

For more detail on the Alert component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.