Alert

Attract user attention with important static message
Import

Usage

Color
Radius
xs
sm
md
lg
xl
Variant
import { Alert } from '@mantine/core';
import { IconAlertCircle } from '@tabler/icons-react';
function Demo() {
return (
<Alert icon={<IconAlertCircle size="1rem" />} 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
<Alert withCloseButton /> // -> not ok
<Alert withCloseButton closeButtonLabel="Close alert" /> // -> ok
<Alert /> // -> ok, without close button, closeButtonLabel is not needed

Alert component props

NameTypeDescription
children *
ReactNode
Alert message
closeButtonLabel
string
Close button aria-label
color
MantineColor
Key of theme.colors
icon
ReactNode
Icon displayed next to the title
onClose
() => void
Called when close button is clicked
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default
title
ReactNode
Alert title
variant
Variants<"outline" | "light" | "filled">
Controls Alert background, color and border styles, "light" by default
withCloseButton
boolean
Determines whether close button should be displayed, false by default

Alert component Styles API

NameStatic selectorDescription
root.mantine-Alert-rootRoot element
wrapper.mantine-Alert-wrapperWraps body and icon
body.mantine-Alert-bodyBody element, wraps title and message
title.mantine-Alert-titleTitle element, contains label and icon
label.mantine-Alert-labelTitle label
message.mantine-Alert-messageAlert message, defined by children
icon.mantine-Alert-iconIcon wrapper
closeButton.mantine-Alert-closeButtonClose button, defined by withCloseButton prop