Alert
Attract user attention with important static message
Import
Source
Docs
Package
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
import React from 'react';import { Alert, Text } from '@mantine/core';function Demo() {return (<Alertcolor="red"title="Something went wrong"icon={<XCircleFillIcon size={16} />}withCloseButtoncloseButtonLabel="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
<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!
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
Built by Vitaly Rtishchev and these awesome people