README.md

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 %}

API

Prop name	Type	Default	Required	Description
class	string	null	no	Custom CSS class
color	Emotion Color dictionary	success	no	Color variant
elementType	string	div	no	HTML tag to render
iconName	string	null	no	Icon used in Alert
isCentered	bool	false	no	If true, Alert is centered

You can add id, data-* or aria-* attributes to further extend component's descriptiveness and accessibility.