Dialog 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.

modal dialog

role=dialog, aria-modal=true

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Open modal",
    "attributes": {
      "onclick": "openDialog('default', this, 'label-default-example')"
    }
  },
  "id": "default",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "label-default-example",
    "aria-modal": true
  },
  "caller": "  \n\n<!-- modal -->\n<div id=\"default-example\" class=\"relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl\">\n    <h2      id=\"label-default-example\" class=\"c-h2 px-base text-center focus:outline-none focus:underline\" tabindex=\"-1\"\n>Aviso</h2>\n    <p class=\"c-p my-base text-center\">\n        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.\n    </p>\n  <div class=\"flex flex-wrap gap-sm w-full justify-center\">\n        <div class=\"mt-sm\">\n          \n\n<!-- button --><button class=\"c-button c-button--primary\"  onclick=\"closeDialog(this)\">\n  De acuerdo, continuar\n</button><!-- /button -->\n        </div>\n  </div>\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\n      <button onclick=\"closeDialog(this)\" 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 la ventana emergente\">\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<!-- /modal -->\n"
})  %}
      

<!-- modal -->
<div id="default-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl">
    <h2      id="label-default-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Aviso</h2>
    <p class="c-p my-base text-center">
        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary"  onclick="closeDialog(this)">
  De acuerdo, continuar
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

{% endcall %}

Markup


<!-- dialog -->


<!-- button --><button class="c-button"  onclick="openDialog(&#39;default&#39;, this, &#39;label-default-example&#39;)">
  Open modal
</button><!-- /button -->

<div id="default" class="hidden lg:absolute lg:inset-0 min-h-screen" role="dialog" aria-labelledby="label-default-example" aria-modal="true">
    

<!-- modal -->
<div id="default-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl">
    <h2      id="label-default-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Aviso</h2>
    <p class="c-p my-base text-center">
        Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.
    </p>
  <div class="flex flex-wrap gap-sm w-full justify-center">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary"  onclick="closeDialog(this)">
  De acuerdo, continuar
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

</div>
<!-- /dialog -->

modal dialog with secondary actions

role=dialog, aria-modal=true

Show code

Macro

{# Remove the "caller" json parameter and use just the code between "call" and "endcall" instead #} 
{% from "components/dialog/_macro.dialog.njk" import componentDialog %}
{% call componentDialog({
  "button": {
    "text": "Open modal with secondary actions",
    "attributes": {
      "onclick": "openDialog('secondary', this, 'label-secondary-action-example')"
    }
  },
  "id": "secondary",
  "classes": "hidden lg:absolute lg:inset-0 min-h-screen",
  "attributes": {
    "role": "dialog",
    "aria-labelledby": "secondary-action-example",
    "aria-modal": true
  },
  "caller": "  \n\n<!-- modal -->\n<div id=\"secondary-action-example\" class=\"relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl\">\n    <h2      id=\"label-secondary-action-example\" class=\"c-h2 px-base text-center focus:outline-none focus:underline\" tabindex=\"-1\"\n>Editar servicio publicado</h2>\n    <div class=\"c-paragraph-base my-base text-center\">\n        Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados\n    </div>\n  <div class=\"flex flex-wrap gap-sm w-full justify-between\">\n        <div class=\"mt-sm\">\n          \n\n<!-- button --><button class=\"c-button c-button--primary\" >\n  Editar servicio\n</button><!-- /button -->\n        </div>\n        <div class=\"mt-sm\">\n          \n\n<!-- button --><button class=\"c-button\"  onclick=\"closeDialog(this)\">\n  Cancelar <span class=\"sr-only\">y cerrar la ventana modal</span>\n</button><!-- /button -->\n        </div>\n  </div>\n    <div class=\"absolute top-0 right-0 p-sm lg:p-base\">\n      <button onclick=\"closeDialog(this)\" 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 la ventana emergente\">\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<!-- /modal -->\n"
})  %}
      

<!-- modal -->
<div id="secondary-action-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl">
    <h2      id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Editar servicio publicado</h2>
    <div class="c-paragraph-base my-base text-center">
        Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Editar servicio
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button"  onclick="closeDialog(this)">
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

{% endcall %}

Markup


<!-- dialog -->


<!-- button --><button class="c-button"  onclick="openDialog(&#39;secondary&#39;, this, &#39;label-secondary-action-example&#39;)">
  Open modal with secondary actions
</button><!-- /button -->

<div id="secondary" class="hidden lg:absolute lg:inset-0 min-h-screen" role="dialog" aria-labelledby="secondary-action-example" aria-modal="true">
    

<!-- modal -->
<div id="secondary-action-example" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white mt-2xl">
    <h2      id="label-secondary-action-example" class="c-h2 px-base text-center focus:outline-none focus:underline" tabindex="-1"
>Editar servicio publicado</h2>
    <div class="c-paragraph-base my-base text-center">
        Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados
    </div>
  <div class="flex flex-wrap gap-sm w-full justify-between">
        <div class="mt-sm">
          

<!-- button --><button class="c-button c-button--primary" >
  Editar servicio
</button><!-- /button -->
        </div>
        <div class="mt-sm">
          

<!-- button --><button class="c-button"  onclick="closeDialog(this)">
  Cancelar <span class="sr-only">y cerrar la ventana modal</span>
</button><!-- /button -->
        </div>
  </div>
    <div class="absolute top-0 right-0 p-sm lg:p-base">
      <button onclick="closeDialog(this)" 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 la ventana emergente">
        <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>
<!-- /modal -->

</div>
<!-- /dialog -->