Alert

Added in version 12.0.0.

Renders an alert box (also known as callout) in the HTML.

Props and blocks are aligned on the Symfony UX Toolkit bootstrap Alert, so that the component stays easy to migrate to the Toolkit in the future.

Danger alert

Props

All props are optional.

  • color string.

    • Possible values: primary, secondary, success, danger, warning, info (default), light, dark.

  • heading string|null. The optional alert heading.

  • content string. The alert message, used when the content block is not overridden.

  • icon string. A CSS icon class, for example ti ti-info-circle.

    • If not set, the icon is automatically determined from the alert color.

  • dismissible bool. When true, renders a dismiss button and the dismissal transition classes.

    • Default: false.

  • important bool. When true, the alert is visually highlighted (Tabler’s alert-important).

    • Default: false.

  • link_text string|null. Label of the action link. If not defined, the link_url is displayed instead.

  • link_url string|null. URL of an optional action link, either internal or external.

  • link_blank bool. If true, the link target is _blank, _self otherwise.

    • Default: false.

Additional attributes

Any attribute that isn’t one of the props above (for example class, id, data-* or role) is forwarded to the root <div> element. class is appended to the component’s own classes rather than replacing them:

<twig:Alert class="mb-0" role="status" />

Blocks

heading

Completely overrides the heading, including the wrapping <h4> element.

content

Completely overrides the message area.

<twig:Alert:Danger>
    <twig:block name="heading">
        <h2 class="alert-heading">
            Custom heading block
        </h2>
    </twig:block>

    <div>
        My alert content
    </div>
</twig:Alert:Danger>
Example with custom twig block

close

The dismiss control, rendered only when dismissible is true. Overriding it lets you replace the default close button entirely.

icon

The leading icon, rendered before the heading. Overriding it with an empty block removes the icon.

action

The action, rendered on the right of the content.

Example with action defined

Variants

Pre-typed variant components are available as shortcuts:

<twig:Alert:Success>Success alert</twig:Alert:Success>
<twig:Alert:Info>Info alert</twig:Alert:Info>
<twig:Alert:Warning>Warning alert</twig:Alert:Warning>
<twig:Alert:Danger>Danger alert</twig:Alert:Danger>

<twig:Alert>Main alert</twig:Alert>
<twig:Alert color="danger">Main alert with color danger</twig:Alert>
Alert variants

Note

The type/title/message prop names used before GLPI 12.0.0’s initial release have been renamed to color/heading/content to match the Symfony UX Toolkit. There is no backward-compatibility alias; update any custom call site to use the new names.

Creative Commons License