Alert

Attract user attention with important static message
Import

Usage

Use Alert to attract user attention with important message. Alert is designed to be static, if you need more dynamic variant use Notification component.

Something went wrong
Application crashed, try refreshing the page, if it does not help please contact our support

Error message:
undefined is not a function
import React from 'react';
import { Alert, Text } from '@mantine/core';
function Demo() {
return (
<Alert
color="red"
title="Something went wrong"
icon={<XCircleFillIcon size={16} />}
withCloseButton
closeButtonLabel="Dismiss"
>
Application crashed, try refreshing the page,
if it does not help please contact our support
<br /><br />
Error message:
<Text color="red" size="sm">
undefined is not a function
</Text>
</Alert>
);
}

Title

Something went wrong
Application crashed, please contact out support via email
Application crashed, please contact out support via email
<Alert color="red" title="Something went wrong">
Application crashed, please contact out support via email
</Alert>
<Alert color="red">
Application crashed, please contact out support via email
</Alert>

Color

You can use any color defined in theme.colors. By default Alert will have theme.primaryColor color:

Bummer!
Something terrible happened! You made a mistake and there is no going back, your data was lost forever!
Color
<Alert icon={<XCircleFillIcon size={16} />} title="Bummer!" color="red">
Something terrible happened! You made a mistake and there is no going back, your data was lost forever!
</Alert>

Accessibility

  • Root element role set to alert
  • Set closeButtonLabel prop to make close button visible for screen readers
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback