Alert

Attract user attention with important static message
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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
Go back
TypographyStylesProvider – @mantine/core
Up next
Loader – @mantine/core

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
Learn more about Styles API
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter