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.

Alert

This is Twig implementation of the Alert component.

Basic example usage:


                                                
                                                <Alert>Alert</Alert>

Advanced example usage:


                                                
                                                <Alert color="danger" elementType="span" iconName="close" isCentered>Danger Alert</Alert>

Without lexer:


                                                
                                                {% embed "@spirit/alert.twig" with { props: {
                                                    color: 'danger'
                                                    elementType: 'span'
                                                }} %}
                                                    {% block content %}
                                                          Danger Alert
                                                    {% endblock %}
                                                {% endembed %}

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
color	Emotion Color dictionary	success	✕	Color variant
elementType	string	div	✕	HTML tag to render
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.

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