Alert

Attract user attention with important static message

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

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">
      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

<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:

<Alert /> // -> theme.primaryColor (defaults to blue)
<Alert color="red" /> // -> red color

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