Alert examples

Show params

Params

params:
- name: button
  type: component
  required: true
  description: Button component to intereact with the dialog.
- name: labelledId
  type: string
  required: true
  description: Required id attribute to reference with aria-labelledby in the div container tag.
- name: id
  type: string
  required: true
  description: Required id attribute to add to the div container tag.
- name: classes
  type: string
  required: false
  description: Classes to add to the div container tag.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the div container tag.
- name: caller
  type: nunjucks-block
  required: true
  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire item component in a `call` block.

success

role=alert

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Open success",
    "attributes": {
      "onclick": "openAlert('success-id', this)"
    }
  },
  "id": "success-id",
  "attributes": {
    "role": "alert",
    "aria-live": "assertive"
  },
  "caller": "  <!-- notification -->\n<div  x-data=\"{isOpen: true}\"\n      x-show=\"isOpen\"\n      x-transition:enter=\"transition ease-out duration-100 transform\"\n      x-transition:enter-start=\"opacity-0 scale-y-95\"\n      x-transition:enter-end=\"opacity-100 scale-y-100\"\n      x-transition:leave=\"transition ease-in duration-75 transform\"\n      x-transition:leave-start=\"opacity-100 scale-y-100\"\n      x-transition:leave-end=\"opacity-0 scale-y-95\"\n      id=\"default-id\" class=\"c-notification c-notification--success\">\n  <div class=\"h-full mr-base\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-success-dark\" aria-label=\"Éxito\" focusable=\"false\" role=\"img\"><path d=\"M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z\" fill=\"currentColor\"/></svg>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n        <p          id=\"default-id-title\"  class=\"font-bold pr-base focus:outline-none focus:underline outline-none\" tabindex=\"-1\"\n>El documento se ha cargado correctamente</p>\n    </div>\n      <div class=\"absolute top-0 right-0 p-sm\">\n        <button @click=\"isOpen = false\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar notificación\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\n        </button>\n      </div>\n  </div>\n</div>\n<!-- /notification -->\n"
})  %}
      <!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="default-id" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="default-id-title"  class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1"
>El documento se ha cargado correctamente</p>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->

{% endcall %}

Markup


<!-- alert -->
<div>
  

<!-- button --><button class="c-button"  onclick="openAlert(&#39;success-id&#39;, this)">
  Open success
</button><!-- /button -->
  <div id="success-id" role="alert" aria-live="assertive">
  </div>
  <div class="hidden" id="template-success-id">
      <!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="default-id" class="c-notification c-notification--success">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-success-dark" aria-label="Éxito" focusable="false" role="img"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="default-id-title"  class="font-bold pr-base focus:outline-none focus:underline outline-none" tabindex="-1"
>El documento se ha cargado correctamente</p>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->

  </div>
</div>
<!-- /alert -->

alert

role=alert. Show code to see the function call with the focusFirst item in action.

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/alert/_macro.alert.njk" import componentAlert %}
{% call componentAlert({
  "button": {
    "text": "Open alert",
    "attributes": {
      "onclick": "openAlert('alert-id', this, 'secondary-id-title')"
    }
  },
  "id": "alert-id",
  "caller": "  <!-- notification -->\n<div  x-data=\"{isOpen: true}\"\n      x-show=\"isOpen\"\n      x-transition:enter=\"transition ease-out duration-100 transform\"\n      x-transition:enter-start=\"opacity-0 scale-y-95\"\n      x-transition:enter-end=\"opacity-100 scale-y-100\"\n      x-transition:leave=\"transition ease-in duration-75 transform\"\n      x-transition:leave-start=\"opacity-100 scale-y-100\"\n      x-transition:leave-end=\"opacity-0 scale-y-95\"\n      id=\"secondary-id\" class=\"c-notification c-notification--alert\">\n  <div class=\"h-full mr-base\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-5 h-5 text-alert-base\" aria-label=\"Error\" focusable=\"false\" role=\"img\"><path d=\"M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z\" fill=\"currentColor\"/></svg>\n  </div>\n  <div class=\"lg:flex flex-1 self-center\">\n    <div class=\"lg:flex-1 lg:self-center\">\n        <p          id=\"secondary-id-title\"  class=\"font-bold pr-base focus:outline-none focus:underline mr-lg\" tabindex=\"-1\"\n>Problemas encontrados</p>\n        <ul>\n            <li>\n              <a href=\"#empresa\" class=\"c-link  c-link--alert\">Campo Nombre de la empresa está vacío</a>\n            </li>\n            <li>\n              <a href=\"#actividad\" class=\"c-link  c-link--alert\">Campo Fecha de inicio de la actividad está vacío</a>\n            </li>\n            <li>\n              <a href=\"#email\" class=\"c-link  c-link--alert\">El formato de correo electrónico es incorrecto</a>\n            </li>\n        </ul>\n    </div>\n      <div class=\"absolute top-0 right-0 p-sm\">\n        <button @click=\"isOpen = false\" class=\"p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none\" aria-label=\"X: Cerrar notificación\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" width=\"1em\" height=\"1em\" class=\"w-4 h-4\" aria-hidden=\"true\" role=\"presentation\"><path d=\"M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z\" fill=\"currentColor\"/></svg>\n        </button>\n      </div>\n  </div>\n</div>\n<!-- /notification -->\n"
})  %}
      <!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="secondary-id" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="secondary-id-title"  class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1"
>Problemas encontrados</p>
        <ul>
            <li>
              <a href="#empresa" class="c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
            </li>
            <li>
              <a href="#actividad" class="c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
            </li>
            <li>
              <a href="#email" class="c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
            </li>
        </ul>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->

{% endcall %}

Markup


<!-- alert -->
<div>
  

<!-- button --><button class="c-button"  onclick="openAlert(&#39;alert-id&#39;, this, &#39;secondary-id-title&#39;)">
  Open alert
</button><!-- /button -->
  <div id="alert-id">
  </div>
  <div class="hidden" id="template-alert-id">
      <!-- notification -->
<div  x-data="{isOpen: true}"
      x-show="isOpen"
      x-transition:enter="transition ease-out duration-100 transform"
      x-transition:enter-start="opacity-0 scale-y-95"
      x-transition:enter-end="opacity-100 scale-y-100"
      x-transition:leave="transition ease-in duration-75 transform"
      x-transition:leave-start="opacity-100 scale-y-100"
      x-transition:leave-end="opacity-0 scale-y-95"
      id="secondary-id" class="c-notification c-notification--alert">
  <div class="h-full mr-base">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-5 h-5 text-alert-base" aria-label="Error" focusable="false" role="img"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
  </div>
  <div class="lg:flex flex-1 self-center">
    <div class="lg:flex-1 lg:self-center">
        <p          id="secondary-id-title"  class="font-bold pr-base focus:outline-none focus:underline mr-lg" tabindex="-1"
>Problemas encontrados</p>
        <ul>
            <li>
              <a href="#empresa" class="c-link  c-link--alert">Campo Nombre de la empresa está vacío</a>
            </li>
            <li>
              <a href="#actividad" class="c-link  c-link--alert">Campo Fecha de inicio de la actividad está vacío</a>
            </li>
            <li>
              <a href="#email" class="c-link  c-link--alert">El formato de correo electrónico es incorrecto</a>
            </li>
        </ul>
    </div>
      <div class="absolute top-0 right-0 p-sm">
        <button @click="isOpen = false" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
        </button>
      </div>
  </div>
</div>
<!-- /notification -->

  </div>
</div>
<!-- /alert -->