SUI Dashboard Material Alerts

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


Examples

import SuiAlert from "components/SuiAlert";
import SuiTypography from "components/SuiTypography";

export default Example() {
  return (
    <SuiAlert color="primary || secondary || info || success || warning || error || light || dark">
      <SuiTypography variant="body2" textColor="white">
        <SuiTypography component="a" href="#" variant="body2" fontWeight="medium" textColor="white">
          Primary!
        </SuiTypography> This is a primary alert—check it out!
      </SuiTypography>
    </SuiAlert>
  )
}   

With icon

import SuiAlert from "components/SuiAlert";
import SuiTypography from "components/SuiTypography";
import Icon from "@material-ui/core/icon";

export default Example() {
  return (
    <SuiAlert color="warning">
      <Icon className="material-icons-round" fonSize="small">thumb_up</Icon>
      <SuiTypography variant="body2" textColor="white">
        <SuiTypography component="a" href="#" variant="body2" fontWeight="medium" textColor="white">
          Primary!
        </SuiTypography> This is a primary alert—check it out!
      </SuiTypography>
    </SuiAlert>
  )
}

Dismissing

import SuiAlert from "components/SuiAlert";
import SuiTypography from "components/SuiTypography";
import Icon from "@material-ui/core/icon";

export default Example() {
  return (
    <SuiAlert color="primary || secondary || info || success || warning || error || light || dark" dismissible>
      <Icon className="material-icons-round" fonSize="small">thumb_up</Icon>
      <SuiTypography variant="body2" textColor="white">
        <SuiTypography component="a" href="#" variant="body2" fontWeight="medium" textColor="white">
          Primary!
        </SuiTypography> This is a primary alert—check it out!
      </SuiTypography>
    </SuiAlert>
  )
}