Alert

An inline message with a severity: an icon, the message, an optional AlertTitle, an action and a close control. role="alert" is announced at once; "status", politely.

Source

Demos

For usage examples, visit the component demo page: Alert

Import

import { Alert } from '@soroush.tech/design-system/Alert'

Props

Prop	Type	Default	Description
`children`	`ReactNode`	-	The message. An `AlertTitle` may come first.
`severity`	`'success' \| 'info' \| 'warning' \| 'error'`	`'info'`	Picks the icon and the palette color.
`variant`	`'standard' \| 'contained' \| 'outlined'`	`'standard'`	Tinted, filled, or only outlined.
`icon`	`ReactNode \| false`	the severity's	The icon before the message; `false` draws none.
`action`	`ReactNode`	-	What sits at the end of the alert - a button.
`onClose`	`(event) => void`	-	Shows a close control.
`closeLabel`	`string`	-	Names the close control.
`role`	`'alert' \| 'status'`	`'alert'`	Announced at once, or politely.
`borderRadius`	`keyof Theme['radii']`	`theme.defaults.surfaceRadius`, else square	Corner radius.
`className`, `data-testid`			On the root.

It takes the styled-system space props too.

Colors and contrast

Standard: a tint of the severity's main (15%) behind the theme's text.initial; the icon is the severity's color.
Outlined: a border in the severity's main, text.initial for the text.
Contained: the severity's main with the theme's contrastText on it - so its contrast is the theme's, and a theme whose contrastText is too light on a main makes it so here too.

The standard and outlined texts are checked against AA in the tests, for each severity.

Customization

theme.components.Alert styles the root, the icon, the message, the action and the closeButton; AlertTitle its root. Its defaultProps set severity, variant, closeLabel role and borderRadius.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.