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';
function Demo() {
return (
<Alert icon={<IconAlertCircle 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
<Alert withCloseButton /> // -> not ok
<Alert withCloseButton closeButtonLabel="Close alert" /> // -> ok
<Alert /> // -> ok, without close button, closeButtonLabel is not needed
Download more icon variants from https://tabler-icons.io/i/search

Alert component props

NameTypeDescription
children *
ReactNode
Alert message
closeButtonLabel
string
Close button aria-label
color
MantineColor
Color from theme.colors
icon
ReactNode
Icon displayed next to title
onClose
() => void
Called when close button is clicked
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Radius from theme.radius, or number to set border-radius in px, defaults to theme.defaultRadius
title
ReactNode
Alert title
variant
"outline" | "light" | "filled"
Controls Alert background, color and border styles, defaults to light
withCloseButton
boolean
True to display close button

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