Skip to content
PHIL
Français

Alert

component

A message that stands out: an error, a confirmation.

Preview

Light

Code 
<twig:Alert variant="destructive">
    <twig:Alert:Title>Not saved</twig:Alert:Title>
    <twig:Alert:Description>The title is missing.</twig:Alert:Description>
</twig:Alert>

Dark

Code 
<twig:Alert variant="destructive">
    <twig:Alert:Title>Not saved</twig:Alert:Title>
    <twig:Alert:Description>The title is missing.</twig:Alert:Description>
</twig:Alert>

Try it

Change the props; the example is rendered again by the server.

<twig:Alert variant="destructive">
    <twig:Alert:Title>Not saved</twig:Alert:Title>
    <twig:Alert:Description>The title is missing.</twig:Alert:Description>
</twig:Alert>

Variants

variant

The visual style variant.

variant="default"
variant="destructive"

Installation

php bin/console ux:install alert --kit=github.com/parler-haut-interagir-librement/ux-kit

Props

PropTypeDefaultDescription
variant 'default'|'destructive' 'default' The visual style variant.

Accessibility

The role alert is announced at once; a message of no urgency takes role="status", which the attribute replaces.

Files to copy

templates/components/Alert.html.twig 
{%- props
    ## 'default'|'destructive' The visual style variant.
    variant = 'default'
-%}
<div data-slot="alert" data-variant="{{ variant }}"{{ attributes.defaults({class: 'isAlert' ~ (variant is same as('destructive') ? ' isDanger' : ''), role: 'alert'}) }}>
{##- The alert content, typically includes `Alert:Title` and `Alert:Description`. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Alert/Action.html.twig 
<div data-slot="alert-action"{{ attributes.defaults({class: 'isAlertAction'}) }}>
{##- The action element, typically a button or link. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Alert/Description.html.twig 
<div data-slot="alert-description"{{ attributes.defaults({class: 'isAlertDescription'}) }}>
{##- The descriptive text of the alert. -#}
{%- block content %}{% endblock -%}
</div>
templates/components/Alert/Title.html.twig 
<p data-slot="alert-title"{{ attributes.defaults({class: 'isAlertTitle'}) }}><strong>
{##- The title text of the alert. -#}
{%- block content %}{% endblock -%}
</strong></p>