How to customize the status messages in Drupal 10

How to customize the status messages in Drupal 10

In Drupal 10, to customize the status messages (such as success, warning, or error messages), you can override the message template used by the core. Drupal uses the status-messages.html.twig file to render these messages.

1. Locate the Template

The core template file is:

   core/themes/claro/templates/misc/status-messages.html.twig

You should not modify this file directly, instead, copy it to your custom theme or sub-theme.

2. Copy to Your Theme

Copy the file into your theme's templates directory, for example:

themes/custom/your_theme/templates/misc/status-messages.html.twig

If the misc/ folder doesn't exist in your theme, you can create it or you can place that file in main theme folder.

3. Customize the Template

Open the copied status-messages.html.twig file and make your changes. For example, you can modify the markup, add icons, custom classes, etc.

Here’s a basic example of customization:

{% for type, messages in message_list %}
  {% set classes = {
    'status': 'alert alert-success',
    'warning': 'alert alert-warning',
    'error': 'alert alert-danger'
  } %}

    {{ type|capitalize }}:

      {% for message in messages %}
        {{ message }}
      {% endfor %}

{% endfor %}