React Alert - Argon

Provide contextual feedback messages for typical user actions with the handful of available and flexible alerts/notifications.


The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.

Demo

// Argon Dashboard 2 MUI Components import ArgonAlert from "components/ArgonAlert";
This is an alert!

Props Information

NameTypeDefaultDescription
color'primary''secondary''info''success''warning''error''light''dark'infoChange the ArgonAlert background color.
dismissibleboolfalseIf true the ArgonAlert will have a closing button for dismissing it.
children*nodeUse to pass node or content inside the ArgonAlert, its the only required prop.

With Icon

// Argon Dashboard 2 MUI Components import ArgonAlert from "components/ArgonAlert"; // @mui material components import Icon from "@mui/material/Icon";
  This is an alert with icon!

Dismissible

// Argon Dashboard 2 MUI Components import ArgonAlert from "components/ArgonAlert";
This is a dismissible alert!
×