DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Botones

Componentes principales

Los botones son elementos sobre los que se puede interactuar para realizar acciones o navegar.

Button-loader

Por defecto

Descripción visual

Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal. Tamaño compacto con padding moderado alrededor del texto. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Por defecto"
}) }}

Por defecto con el estado cargando

Simula activar el estado cargando

Descripción visual

Botón rectangular con borde gris claro de 1px, fondo blanco, y spinner circular animado en gris oscuro centrado. Tamaño compacto con padding moderado. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto con el estado cargando

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "loading",
  "text": "Cargando",
  "state": "is-loading",
  "classes": "c-button-loader--is-loading",
  "loader": {
    "text": "Acción en curso"
  }
}) }}

Por defecto con estado éxito

Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.

Descripción visual

Botón rectangular con borde verde de 1px, fondo blanco, y ícono de check en verde centrado. Tamaño compacto con padding moderado. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto con estado éxito

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "éxito",
  "text": "Éxito",
  "state": "is-success",
  "success": {
    "text": "Acción realizada con éxito"
  },
  "classes": "c-button-loader--is-success"
}) }}

Por defecto con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con fondo azul oscuro y texto blanco en negrita. Borde azul oscuro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.

Mostrar códigodel ejemplo: Por defecto con estado activo

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Activo",
  "classes": "ds-active"
}) }}

Por defecto con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón rectangular con fondo azul claro y texto azul oscuro en negrita. Borde azul oscuro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.

Mostrar códigodel ejemplo: Por defecto con estado hover

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hover",
  "classes": "ds-hover"
}) }}

Por defecto con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón rectangular con fondo amarillo brillante y texto negro en negrita. Borde negro de 2px con esquinas ligeramente redondeadas. Tamaño compacto con padding uniforme alrededor del texto.

Mostrar códigodel ejemplo: Por defecto con estado focus

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "focus",
  "text": "Focus",
  "classes": "ds-focus"
}) }}

Por defecto deshabilitado

Descripción visual

Botón rectangular con fondo gris claro, borde gris tenue de 1px, esquinas ligeramente redondeadas. Texto en color gris medio alineado al centro. Apariencia visual indica estado no interactivo.

Mostrar códigodel ejemplo: Por defecto deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Deshabilitado",
  "disabled": true
}) }}

Primario

Descripción visual

Botón rectangular con fondo azul oscuro sólido (tonalidad petróleo/teal), sin borde visible, esquinas ligeramente redondeadas. Texto blanco en negrita alineado al centro. Tamaño compacto con padding equilibrado horizontal y vertical.

Mostrar códigodel ejemplo: Primario

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Primario",
  "classes": "c-button-loader--primary"
}) }}

Primario con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con fondo azul oscuro sólido (tonalidad petróleo/teal), sin borde visible, esquinas ligeramente redondeadas. Texto blanco en negrita alineado al centro. Tamaño compacto con padding equilibrado horizontal y vertical.

Mostrar códigodel ejemplo: Primario con estado activo

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Activo",
  "classes": "c-button-loader--primary ds-active"
}) }}

Primario con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón rectangular con fondo azul oscuro (petróleo), texto blanco en mayúsculas, esquinas ligeramente redondeadas. Padding moderado horizontal y vertical. Tipografía sans-serif de peso medio.

Mostrar códigodel ejemplo: Primario con estado hover

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button-loader--primary ds-hover"
}) }}

Primario con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón rectangular con fondo amarillo brillante, texto negro en mayúsculas, borde negro sólido de aproximadamente 2-3px. Esquinas ligeramente redondeadas. Padding moderado horizontal y vertical, tipografía sans-serif de peso medio.

Mostrar códigodel ejemplo: Primario con estado focus

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button-loader--primary ds-focus"
}) }}

Primario deshabilitado

Descripción visual

Botón rectangular con fondo gris claro apagado, texto blanco en mayúsculas, esquinas ligeramente redondeadas. Padding moderado horizontal y vertical. Apariencia atenuada sin borde visible, tipografía sans-serif de peso medio.

Mostrar códigodel ejemplo: Primario deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button-loader--primary"
}) }}

Alerta

Descripción visual

Botón rectangular con fondo rojo intenso (color #C1394A aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Alerta

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Alerta",
  "classes": "c-button-loader--alert"
}) }}

Alerta con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con fondo rojo intenso (color #C1394A aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Alerta con estado activo

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Activo",
  "classes": "c-button-loader--alert ds-active"
}) }}

Alerta con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón rectangular con fondo rojo oscuro (color #8B2A35 aproximadamente), texto blanco en peso medio. Tamaño compacto con padding horizontal y vertical, bordes con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Alerta con estado hover

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button-loader--alert ds-hover"
}) }}

Alerta con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón rectangular con fondo amarillo intenso, texto negro en peso medio, y borde negro de 2px. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.

Mostrar códigodel ejemplo: Alerta con estado focus

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button-loader--alert ds-focus"
}) }}

Alerta deshabilitado

Descripción visual

Botón rectangular con fondo rosa pálido, texto blanco en peso medio, sin borde visible. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.

Mostrar códigodel ejemplo: Alerta deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button-loader--alert"
}) }}

Transparente

Descripción visual

Botón rectangular con fondo blanco o transparente, texto azul en peso medio, y borde azul de 1px. Esquinas ligeramente redondeadas. Encabezado en texto gris oscuro ubicado arriba del botón.

Mostrar códigodel ejemplo: Transparente

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Transparente",
  "classes": "c-button-loader--transparent"
}) }}

Transparente con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón con texto azul oscuro en negrita, fondo transparente sin color de relleno, borde azul oscuro de 2px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Transparente con estado activo

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Activo",
  "classes": "c-button-loader--transparent ds-active"
}) }}

Transparente con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón con texto gris oscuro en negrita, fondo gris muy claro semitransparente, borde gris medio de 1px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Transparente con estado hover

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button-loader--transparent ds-hover"
}) }}

Transparente con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón con texto negro en negrita, fondo amarillo sólido, borde negro grueso de 3px. Dimensiones compactas con padding moderado alrededor del texto. Estilo rectangular con esquinas ligeramente redondeadas, apariencia de alto contraste visual.

Mostrar códigodel ejemplo: Transparente con estado focus

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button-loader--transparent ds-focus"
}) }}

Transparente deshabilitado

Descripción visual

Botón rectangular con fondo blanco, borde gris claro de 1px, y texto gris claro que lee "Deshabilitado". El botón tiene bordes redondeados y padding interno moderado. Apariencia visual de estado inactivo sin interactividad.

Mostrar códigodel ejemplo: Transparente deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button-loader--transparent"
}) }}

Grande

Descripción visual

Botón rectangular con fondo azul petróleo sólido, texto blanco en negrita. Esquinas ligeramente redondeadas con padding generoso vertical y horizontal. Tipografía de tamaño mediano-grande con aspecto prominente y llamativo.

Mostrar códigodel ejemplo: Grande

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Grande y primario",
  "classes": "c-button-loader--lg c-button-loader--primary"
}) }}

Peque

Descripción visual

Botón rectangular compacto con fondo blanco, borde azul oscuro de 1px, y texto azul oscuro. Esquinas redondeadas con padding interno reducido en todas direcciones. Tamaño de fuente pequeño con aspecto discreto y minimalista.

Mostrar códigodel ejemplo: Peque

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Peque",
  "classes": "c-button-loader--sm"
}) }}

Enlace

Descripción visual

Botón con texto azul en fuente regular, fondo transparente sin borde visible. El botón tiene padding mínimo alrededor del texto, creando un aspecto de enlace de texto clickeable.

Botón enlace
Mostrar códigodel ejemplo: Enlace

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Botón enlace",
  "href": "/"
}) }}

Botón enlace con target blank

Descripción visual

Botón con texto azul seguido de un icono de flecha diagonal apuntando hacia arriba-derecha en color azul. Fondo transparente sin borde, padding mínimo, el icono está posicionado a la derecha del texto con espaciado reducido.

Botón enlace con target
Mostrar códigodel ejemplo: Botón enlace con target blank

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "Botón enlace con target <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='self-center ml-sm' aria-hidden='true' focusable='false' role='presentation'><g><path id='Union' fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
  "href": "http://www.google.com",
  "target": "_blank",
  "attributes": {
    "title": "Se abre en ventana nueva"
  }
}) }}

Enlace deshabilitado

Descripción visual

Botón con texto gris claro en fuente regular, fondo transparente sin borde visible. El botón tiene padding mínimo y presenta una apariencia visualmente atenuada que indica estado inactivo.

Botón enlace deshabilitado
Mostrar códigodel ejemplo: Enlace deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Botón enlace deshabilitado",
  "href": "/",
  "disabled": true
}) }}

Botón con icono a la derecha

Descripción visual

Botón rectangular con fondo blanco y borde azul de 1px. El texto aparece en azul con peso normal, alineado a la izquierda. Un icono cuadrado azul está posicionado en el extremo derecho del botón.

Botón con icono
Mostrar códigodel ejemplo: Botón con icono a la derecha

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
  "href": "/"
}) }}

Botón con icono a la izquierda

Descripción visual

Botón rectangular con fondo blanco y borde azul de 1px. Un icono cuadrado azul está posicionado en el extremo izquierdo. El texto aparece en azul con peso normal, alineado junto al icono.

Botón con icono
Mostrar códigodel ejemplo: Botón con icono a la izquierda

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono",
  "href": "/"
}) }}

Botón sólo con icono

Descripción visual

Botón cuadrado pequeño con fondo azul sólido. Un icono blanco está centrado dentro del botón. Sin texto visible ni bordes adicionales aparentes.

Mostrar códigodel ejemplo: Botón sólo con icono

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
  "href": "/",
  "classes": "c-button-loader--primary p-3 align-bottom"
}) }}

Button peque sólo con icono

Descripción visual

Botón cuadrado pequeño con fondo azul petróleo (teal oscuro) y un icono de signo más (+) blanco centrado. Dimensiones compactas aproximadas de 32x32px, con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Button peque sólo con icono

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
  "href": "/",
  "classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
}) }}

Input

Descripción visual

Campo de entrada de texto rectangular con borde gris claro de 1px y fondo blanco. Incluye un botón interno con texto gris oscuro, borde gris y esquinas redondeadas, posicionado dentro del área del input. Label superior en texto negro pequeño indica el tipo de input.

Mostrar códigodel ejemplo: Input

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "element": "input",
  "name": "send-form",
  "text": "Enviar"
}) }}

Input deshabilitado

Descripción visual

Campo de entrada de texto rectangular con borde gris muy claro de 1px y fondo blanco levemente atenuado. Contiene un botón interno con texto gris claro y borde gris tenue, indicando estado inactivo. Label superior en texto gris oscuro pequeño indica el estado del input.

Mostrar códigodel ejemplo: Input deshabilitado

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "element": "input",
  "text": "Enviar",
  "disabled": true
}) }}

Prevenir doble click

Descripción visual

Botón rectangular con borde azul de 1px, fondo blanco, y texto azul. Tamaño compacto con padding ajustado alrededor del texto. El botón muestra un estado interactivo predeterminado con esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Prevenir doble click

Contenido

Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Enviar",
  "preventDoubleClick": true
}) }}