DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Modal

Avisos

Se trata de una ventana emergente o pop-up y se emplean cuando queremos centrar toda la atención en cierta información, generalmente, cuando se requiere alguna acción antes de continuar con el proceso.

Modal

Por defecto

Descripción visual

Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado "Aviso" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco "De acuerdo, continuar". Ícono de cierre (X) negro en la esquina superior derecha del modal.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "default-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
}) }}

Con button loader

Si quieres que las acciones muestren un Button loader en vez de un botón normal, utiliza el parámetro 'isButtonLoader': true.

Descripción visual

Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado "Aviso" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo mostrando indicador de carga (letra "C" blanca). Ícono de cierre (X) negro en la esquina superior derecha del modal.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con button loader

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "button-loader-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "isButtonLoader": true,
      "state": "is-loading",
      "classes": "c-button-loader--primary c-button-loader--is-loading"
    }
  ],
  "isDismissible": true
}) }}

Con encabezado de nivel 3

Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.

Descripción visual

Modal centrado con fondo blanco, bordes redondeados sutiles y sombra perimetral gris. Encabezado "Esto es un h3" en texto negro negrita, seguido de tres líneas de texto gris oscuro en peso normal. Botón rectangular en la parte inferior con fondo azul petróleo y texto blanco "De acuerdo, continuar". Ícono de cierre (X) negro en la esquina superior derecha del modal.

Esto es un h3

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con encabezado de nivel 3

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "headinglevel-example",
  "title": {
    "text": "Esto es un h3"
  },
  "headingLevel": 3,
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "De acuerdo, continuar",
      "classes": "c-button--primary"
    }
  ],
  "isDismissible": true
}) }}

Con acción secundaria

Las acciones primarias deberán ser botones primarios y aparecer a la izquierda. Las acciones secundarias deberán ser botones por defecto y aparecer a la derecha. Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.

Descripción visual

Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con dos líneas de texto gris oscuro centrado. Pie con dos botones: botón primario "Editar servicio" en azul petróleo con texto blanco, y botón secundario "Cancelar" con borde azul petróleo y texto azul petróleo sobre fondo blanco.

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Mostrar códigodel ejemplo: Con acción secundaria

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "secondary-action-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true
}) }}

Con caller

Entre {% call %} y {% endcall %} puedes insertar el contenido anidado que desees. Útil para anidar mucho contenido dentro del componente.

Descripción visual

Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado, seguido de una línea adicional con enlace azul subrayado. Pie con dos botones: botón primario "Editar servicio" en azul petróleo con texto blanco, y botón secundario "Cancelar" con borde azul petróleo y texto azul petróleo sobre fondo blanco.

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Para más información, ir a la Página de ayuda

Mostrar códigodel ejemplo: Con caller

Contenido

Nunjucks macro

{% from "components/modal/_macro.modal.njk" import componentModal %}
{% call componentModal({
  "id": "caller-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Editar servicio",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true
}) %}
<div class='prose max-w-auto mx-auto'><p class='text-center text-sm'>Para más información, ir a la <a href='#'>Página de ayuda</a></p></div>
{% endcall  %}

Con muchas acciones

No es muy común, pero si lo necesitas, puedes usar varios botones en la zona de acciones primarias (a la izquierda) y de secundarias (a la derecha). Usando las clases modificadores de botones podrás darles la apariencia que desees.

Descripción visual

Modal con fondo blanco, esquinas redondeadas y sombra sutil. Encabezado con título "Aviso" en negrita negro y botón X para cerrar en esquina superior derecha. Cuerpo con tres líneas de texto gris oscuro centrado. Pie con cuatro elementos: dos botones primarios ("Guardar cambios y publicar" y "Guardar cambios") en azul petróleo con texto blanco, enlace "Más información" en azul subrayado, y botón "Cancelar" con borde gris y texto gris sobre fondo blanco.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con muchas acciones

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "many-actions-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "Guardar cambios y publicar",
      "classes": "c-button--primary"
    },
    {
      "text": "Guardar cambios"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Más información",
      "classes": "c-button--transparent"
    },
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "classes": "max-w-4xl"
}) }}

Con muchas acciones y botón loader

Descripción visual

Modal centrado con fondo blanco, título negro en negrita, texto descriptivo gris oscuro en tres líneas, y botón de cierre X negro en esquina superior derecha. Incluye botón primario verde azulado con checkmark blanco, botón secundario blanco con borde azul y texto azul, y spinner de carga circular azul oscuro. Bordes redondeados con sombra sutil de elevación.

Aviso

Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas.

Mostrar códigodel ejemplo: Con muchas acciones y botón loader

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "many-actions-is-button-loader-example",
  "title": {
    "text": "Aviso"
  },
  "description": {
    "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
  },
  "itemsPrimary": [
    {
      "text": "Guardar cambios y publicar",
      "isButtonLoader": true,
      "state": "is-success",
      "classes": "c-button-loader--primary c-button-loader--is-success"
    },
    {
      "text": "Guardar cambios",
      "isButtonLoader": true
    }
  ],
  "itemsSecondary": [
    {
      "text": "Más información",
      "isButtonLoader": true,
      "state": "is-loading",
      "classes": "c-button-loader--transparent c-button-loader--is-loading"
    },
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>",
      "isButtonLoader": true,
      "state": "is-success",
      "classes": "c-button-loader--is-success"
    }
  ],
  "isDismissible": true,
  "classes": "max-w-4xl"
}) }}

Con icono de tipo borrar/eliminar

Si la acción es destructiva, entonces se invierte el orden y la acción principal destructiva aparece a la derecha con el modificador de Botón alerta.

Descripción visual

Modal centrado con fondo blanco, icono de bote de basura rosa pálido en la parte superior, título negro en negrita, y pregunta de confirmación en gris oscuro. Contiene dos botones alineados horizontalmente: botón izquierdo blanco con borde azul y texto azul, botón derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, X negra para cerrar en esquina superior derecha.

Borrar servicio

Esta acción no se puede deshacer ¿Estás seguro?

Mostrar códigodel ejemplo: Con icono de tipo borrar/eliminar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-A-example",
  "title": {
    "text": "Borrar servicio"
  },
  "description": {
    "text": "Esta acción no se puede deshacer ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, borrar servicio",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "delete"
  }
}) }}

Con icono de tipo descartar

Descripción visual

Modal centrado con fondo blanco, icono circular con diagonal tachada en rosa pálido, título negro en negrita, y mensaje de advertencia en gris oscuro ocupando dos líneas. Presenta dos botones horizontales: izquierdo blanco con borde azul y texto azul, derecho rojo sólido con texto blanco. Bordes redondeados con sombra de elevación, botón X negro en esquina superior derecha.

Descartar cambios

Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?

Mostrar códigodel ejemplo: Con icono de tipo descartar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-B-example",
  "title": {
    "text": "Descartar cambios"
  },
  "description": {
    "text": "Si descartas los cambios, perderás el trabajo realizado en este servicio. ¿Estás seguro?"
  },
  "itemsPrimary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Si, descartar cambios",
      "classes": "c-button--alert"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "discard"
  }
}) }}

Con icono de tipo cambios

Descripción visual

Modal centrado con fondo blanco, título negro en negrita, icono circular gris claro arriba del título. Texto descriptivo gris debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.

Hay cambios sin guardar

Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.

Mostrar códigodel ejemplo: Con icono de tipo cambios

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-C-example",
  "title": {
    "text": "Hay cambios sin guardar"
  },
  "description": {
    "text": "Si sales de la pantalla de edición sin guardar, perderás los cambios realizados."
  },
  "itemsPrimary": [
    {
      "text": "Guardar y salir",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "text": "Descartar cambios y salir"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "changes"
  }
}) }}

Con icono de tipo editar

Descripción visual

Modal centrado con fondo blanco, título negro en negrita, icono cuadrado azul claro arriba del título. Bloque de texto descriptivo gris en tamaño pequeño debajo del título, centrado. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.

Editar servicio publicado

Actualmente este servicio está publicado.

Los cambios realizados no serán visibles hasta que sean validados

Mostrar códigodel ejemplo: Con icono de tipo editar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-D-example",
  "title": {
    "text": "Editar servicio publicado"
  },
  "description": {
    "html": "<p>Actualmente este servicio está publicado.</p><p>Los cambios realizados no serán visibles hasta que sean validados</p>"
  },
  "itemsPrimary": [
    {
      "text": "Lo sé, quiero editarlo",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "edit"
  }
}) }}

Con icono de tipo publicar

Descripción visual

Modal centrado con fondo blanco, título negro en negrita, icono triangular azul claro arriba del título. Texto descriptivo gris centrado debajo del título en tamaño mediano. Dos botones en la parte inferior: izquierdo con fondo azul petróleo y texto blanco, derecho con fondo blanco, borde gris y texto negro.

Publicar

Se van a publicar todos los elementos de este servicio que están pendientes de publicación.

Mostrar códigodel ejemplo: Con icono de tipo publicar

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "icon-type-E-example",
  "title": {
    "text": "Publicar"
  },
  "description": {
    "text": "Se van a publicar todos los elementos de este servicio que están pendientes de publicación."
  },
  "itemsPrimary": [
    {
      "text": "Publicar",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "type": "publish"
  }
}) }}

Con icono personalizado

Utiliza el parámetro "icon" y su parámetro "html" para añadir código HTML de un icono SVG inline. Utiliza los atributos de la etiqueta <svg> de este ejemplo, incluido el aria-label.

Descripción visual

Diálogo modal centrado con fondo blanco, bordes redondeados y sombra suave. Icono circular azul claro con símbolo de interrogación en la parte superior, título en negrita negro, tres párrafos de texto gris oscuro con diferentes niveles de información, pregunta final en cursiva gris oscuro, botón primario teal con texto blanco "Sí, comenzar proceso" y botón secundario con borde teal y texto teal "Cancelar" alineados horizontalmente en la parte inferior. Botón de cierre (×) en la esquina superior derecha del modal.

¿Estás seguro de querer cambiar de estado a múltiples archivos?

Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.

Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso no cierres la ventana del navegador ni naveges a otra página en esta pestaña.

¿Estás seguro de iniciar el proceso ahora?

Mostrar códigodel ejemplo: Con icono personalizado

Contenido

Nunjucks macro
{% from "components/modal/_macro.modal.njk" import componentModal %}
{{ componentModal({
  "id": "custom-icon-example",
  "title": {
    "text": "¿Estás seguro de querer cambiar de estado a múltiples archivos?",
    "classes": "c-h2 mt-base focus:outline-hidden focus:underline"
  },
  "description": {
    "html": "<p class='c-paragraph-base'>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p class='c-paragraph-base'>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
    "classes": "mb-lg text-left"
  },
  "itemsPrimary": [
    {
      "text": "Si, comenzar proceso",
      "classes": "c-button--primary"
    }
  ],
  "itemsSecondary": [
    {
      "html": "Cancelar <span class='sr-only'>y cerrar la ventana modal</span>"
    }
  ],
  "isDismissible": true,
  "icon": {
    "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em' class='block w-16 h-16 text-primary-light' aria-label='Pregunta' focusable='false'><path d='M12,0A12,12,0,1,0,24,12,12,12,0,0,0,12,0Zm0,19a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,12,19Zm1.6-6.08a1,1,0,0,0-.6.92,1,1,0,0,1-2,0,3,3,0,0,1,1.8-2.75A2,2,0,1,0,10,9.25a1,1,0,0,1-2,0,4,4,0,1,1,5.6,3.67Z' fill='currentColor'></path></svg>"
  }
}) }}