Alert

An Alert Message is a design system component that provides users with critical information or feedback about their interaction with the application. It typically appears as a prominent, styled box containing a message, often accompanied by an icon to indicate the type of alert, such as success, error, warning, or information. Alert messages are designed to capture attention and convey important updates or issues that require user awareness or action.

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Storybook failed to load. Please connect to the VPN to access.

Usage

Alert

Alert presents feedback or important information to users.


                                                
                                                import { Alert } from '@lmc-eu/spirit-web-react/components';


                                                
                                                <Alert color="success">Hey! Pay attention!</Alert>
                                                <Alert color="informative">Hey! Pay attention!</Alert>
                                                <Alert color="warning">Hey! Pay attention!</Alert>
                                                <Alert color="danger">Hey! Pay attention!</Alert>
                                                <Alert color="informative" iconName="warning">Hey! Pay attention!</Alert>
                                                <Alert color="informative" isCentered>Hey! Pay attention!</Alert>

Default Icons According to Color Variant

Color name	Icon name
danger	danger
default	info
informative	info
success	check-plain
warning	warning

API

Name	Type	Default	Required	Description
children	ReactNode	—	✓	Content of the Alert
color	Emotion Color dictionary	success	✕	Color of the component
iconName	string	info *	✕	Icon used in Alert
isCentered .	bool	false	✕	If true, Alert is centered

(*) For each emotion color, a default icon is defined. The icons come from the Icon package, or from your custom source of icons. Read the section Default Icons according to Color Variant.

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

For detailed information see Alert component.

⚠️ Please pay attention to the accessibility setting when Alert is dynamically displayed. In case you need to use the component as an information that requires the user's immediate attention, you can set role="alert" as an additional attribute.

Icons

This component uses the Icon component internally. To ensure correct rendering, please refer to the Icon component documentation for setup instructions.