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	warning*
default	info
informative	info
success	check-plain
warning	warning

(*) The warning icon for the danger color has been marked as deprecated. Please make sure you have the danger icon in your project assets. The warning icon for the danger color will be removed in favor of the danger icon in the next major version.

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.