Alert

A banner to display important messages.

<Alert>I'm alerting you of some important things</Alert>

Props

Prop	Type	Default	Description
action	ReactNode		The action to display. It renders after the message, at the end of the alert.
children	ReactNode		some description
classes	object		Override or extend the styles applied to the component.
closeText	object	Close	Override the default label for the close popup icon button.
color	"error" \| "info" \| "success" \| "warning"		The main color for the alert. Unless provided, the value is taken from the severity prop.
icon	ReactNode		Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop.
iconMapping	{ error?: ReactNode, info?: ReactNode, success?: ReactNode, warning?: ReactNode, }		The component maps the severity prop to a range of different icons, for instance success to <SuccessOutlined>. If you wish to change this mapping, you can provide your own. Alternatively, you can use the icon prop to override the icon displayed.
onClose	(event: object) => void		Callback fired when the component requests to be closed. When provided and no action prop is set, a close icon button is displayed that triggers the callback when clicked.
role	string	alert	The ARIA role attribute of the element.
severity	'error' \| 'info' \| 'success' \| 'warning'	success	The severity of the alert. This defines the color and icon used.
variant	'standard' \| 'filled' \| 'outlined' \| 'vertical'	standard	The variant to use.

The ref is forwarded to the root element.

Examples

Severity

<Alert severity="error">I'm alerting you of some important things</Alert>

<br />

<Alert severity="info">I'm alerting you of some important things</Alert>

<br />

<Alert severity="success">I'm alerting you of some important things</Alert>

<br />

<Alert severity="warning">I'm alerting you of some important things</Alert>
<br />

<Alert severity="secondary">I'm alerting you of some important things</Alert>

Actions

Dismissable with 0 Button

<Alert
  onClose={() => alert("I'm closing now")}
  severity="success"
>
  A short message assuring the user of a success.
</Alert>

Dismissable with 1 Button

<Alert
  onClose={() => alert("I'm closing now")}
  action={
    <Button
      onClick={() => alert('you clicked the button!')}
      variant="text"
      size="small"
    >
      No Way
    </Button>
  }
  severity="success"
>
  A short message assuring the user of a success.
</Alert>

Dismissable with 2 Buttons

<Alert
  onClose={() => alert("I'm closing now")}
  action={
    <>
      <Button
      onClick={() => alert('you clicked the button!')}
      variant="text"
      size="small"
    >
      Ugh
    </Button>
    <Button
      onClick={() => alert('you clicked the button!')}
      variant="text"
      size="small"
    >
      No Way
    </Button>
    </>
  }
  severity="success"
>
  A short message assuring the user of a success.
</Alert>

vertical variant example

<Alert
  onClose={() => alert("I'm closing now")}
  severity="secondary"
  variant="vertical"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Alert>