View as Markdown

Alert

Provides contextual feedback messages for typical user actions.

100%
Loading... 
<twig:Alert color="success" heading="Well done!" dismissible>
    Your changes were saved successfully. <a href="#" class="alert-link">Review them now</a>.
</twig:Alert>

Installation

php bin/console ux:install alert --kit bootstrap

Install the following Composer dependencies:

composer require twig/extra-bundle twig/html-extra:^3.12.0

Install the following front-end dependencies:

npm install bootstrap@^5.3.0
# ...or with Symfony AssetMapper
php bin/console importmap:require bootstrap bootstrap/dist/css/bootstrap.min.css

Copy the following file(s) into your app:

{# @prop color &#039;primary&#039;|&#039;secondary&#039;|&#039;success&#039;|&#039;danger&#039;|&#039;warning&#039;|&#039;info&#039;|&#039;light&#039;|&#039;dark&#039; The Bootstrap contextual color. #}
{# @prop dismissible boolean Whether to render a dismiss button and dismissal transition classes. #}
{# @prop heading string|null The optional alert heading. #}
{# @prop content string The fallback message when no content block is provided. #}
{# @block heading The alert heading, rendered before the main content. #}
{# @block content The alert message and optional additional content. #}
{# @block close The dismiss control rendered when the alert is dismissible. #}
{%- props
    color = &#039;primary&#039;,
    dismissible = false,
    heading = null,
    content = &#039;&#039;
-%}

{%- set classes = html_classes({
    alert: true,
    (&#039;alert-&#039; ~ color): true,
    &#039;alert-dismissible&#039;: dismissible,
    fade: dismissible,
    show: dismissible,
}) -%}

&lt;div {{ attributes.defaults({class: classes, role: &#039;alert&#039;}) }}&gt;
    {%- block heading -%}
        {%- if heading is not null and heading is not empty -%}
            &lt;h4 class=&quot;alert-heading&quot;&gt;{{ heading }}&lt;/h4&gt;
        {%- endif -%}
    {%- endblock -%}

    {%- block content -%}
        {{- content -}}
    {%- endblock -%}

    {%- if dismissible -%}
        {%- block close -%}
            &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;alert&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
        {%- endblock -%}
    {%- endif -%}
&lt;/div&gt;

Usage

<twig:Alert>A simple primary alert - check it out!</twig:Alert>

Accessibility

Do not rely on color alone to communicate the alert's meaning. Include clear visible text or additional context for assistive technologies.

Dismissal removes the alert from the document. When appropriate, listen for Bootstrap's closed.bs.alert event and move focus to a logical destination.

Examples

Contextual variants

Use one of Bootstrap's eight contextual colors to match the message's purpose.

100%
Loading... 
<div class="d-flex flex-column gap-2">
    <twig:Alert class="mb-0">A simple primary alert - check it out!</twig:Alert>
    <twig:Alert color="secondary" class="mb-0">A simple secondary alert - check it out!</twig:Alert>
    <twig:Alert color="success" class="mb-0">A simple success alert - check it out!</twig:Alert>
    <twig:Alert color="danger" class="mb-0">A simple danger alert - check it out!</twig:Alert>
    <twig:Alert color="warning" class="mb-0">A simple warning alert - check it out!</twig:Alert>
    <twig:Alert color="info" class="mb-0">A simple info alert - check it out!</twig:Alert>
    <twig:Alert color="light" class="mb-0">A simple light alert - check it out!</twig:Alert>
    <twig:Alert color="dark" class="mb-0">A simple dark alert - check it out!</twig:Alert>
</div>

Link color

Use alert-link for links that inherit a suitable color from their alert variant.

100%
Loading... 
<div class="d-flex flex-column gap-2">
    <twig:Alert class="mb-0">A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="secondary" class="mb-0">A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="success" class="mb-0">A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="danger" class="mb-0">A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="warning" class="mb-0">A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="info" class="mb-0">A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="light" class="mb-0">A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
    <twig:Alert color="dark" class="mb-0">A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</twig:Alert>
</div>

Additional content

Alerts can contain headings, paragraphs, dividers, and other structured content.

100%
Loading... 
<twig:Alert color="success" heading="Well done!">
    <p>Aww yeah, you successfully read this important alert message. This example text is long enough to show how spacing works with additional content.</p>
    <hr>
    <p class="mb-0">Whenever you need to, use margin utilities to keep things nice and tidy.</p>
</twig:Alert>

Icons

Combine alerts with flex utilities and accessible inline icons.

100%
Loading... 
<div class="d-flex flex-column gap-2">
    <twig:Alert class="d-flex align-items-center mb-0">
        <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="Warning:">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </svg>
        <div>An example alert with an icon</div>
    </twig:Alert>

    <svg xmlns="http://www.w3.org/2000/svg" class="d-none">
        <symbol id="check-circle-fill" viewBox="0 0 16 16">
            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
        </symbol>
        <symbol id="info-fill" viewBox="0 0 16 16">
            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
        </symbol>
        <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
        </symbol>
    </svg>

    <twig:Alert class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Info:"><use href="#info-fill" /></svg>
        <div>An example alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="success" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Success:"><use href="#check-circle-fill" /></svg>
        <div>An example success alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="warning" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Warning:"><use href="#exclamation-triangle-fill" /></svg>
        <div>An example warning alert with an icon</div>
    </twig:Alert>
    <twig:Alert color="danger" class="d-flex align-items-center mb-0">
        <svg class="bi flex-shrink-0 me-2" width="16" height="16" role="img" aria-label="Danger:"><use href="#exclamation-triangle-fill" /></svg>
        <div>An example danger alert with an icon</div>
    </twig:Alert>
</div>

Dismissing

Enable Bootstrap's alert plugin with a close button, dismissal classes, and transition classes.

100%
Loading... 
<twig:Alert color="warning" dismissible>
    <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</twig:Alert>

API Reference

<twig:Alert>

Prop Type Default
color 
 'primary'|'secondary'|'success'|'danger'|'warning'|'info'|'light'|'dark' 'primary'
dismissible 
 boolean false
heading 
 string|null null
content 
 string ''
Block Description
heading The alert heading, rendered before the main content.
content The alert message and optional additional content.
close The dismiss control rendered when the alert is dismissible.