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

Por defecto

Descripción visual

Botón rectangular con borde azul de 1-2px, fondo blanco, y texto azul en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto

Contenido

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

Por defecto con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con borde azul de 1-2px, fondo azul sólido, y texto blanco en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto con estado activo

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "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 borde azul oscuro de 1-2px, fondo azul claro translúcido, y texto azul oscuro en peso normal. El botón tiene padding moderado alrededor del texto. Esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Por defecto con estado hover

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "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, borde negro de 2px, y texto en negrita negro centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.

Mostrar códigodel ejemplo: Por defecto con estado focus

Contenido

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

Por defecto deshabilitado

Descripción visual

Botón rectangular con fondo blanco, borde gris claro de 1px, y texto en color gris claro centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.

Mostrar códigodel ejemplo: Por defecto deshabilitado

Contenido

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

Primario

Descripción visual

Botón rectangular con fondo azul petróleo oscuro, sin borde visible, y texto en blanco centrado. Dimensiones compactas de altura aproximada 30-35px y ancho ajustado al contenido con padding lateral moderado.

Mostrar códigodel ejemplo: Primario

Contenido

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

Primario con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con fondo azul oscuro (teal/petróleo), texto blanco en negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, aspecto sólido y clickeable.

Mostrar códigodel ejemplo: Primario con estado activo

Contenido

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

Primario con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón rectangular con fondo azul marino oscuro, texto blanco en negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, superficie sólida sin transparencias.

Mostrar códigodel ejemplo: Primario con estado hover

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--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 negrita, padding horizontal amplio. Bordes con esquinas ligeramente redondeadas, alto contraste entre fondo y texto, borde negro de 2px visible.

Mostrar códigodel ejemplo: Primario con estado focus

Contenido

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

Primario deshabilitado

Descripción visual

Botón rectangular con fondo gris azulado claro, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia atenuada sin sombras ni efectos hover visibles.

Mostrar códigodel ejemplo: Primario deshabilitado

Contenido

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

Alerta

Descripción visual

Botón rectangular con fondo rojo brillante, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia sólida con contraste alto entre fondo y texto.

Mostrar códigodel ejemplo: Alerta

Contenido

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

Alerta con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón rectangular con fondo rojo oscuro intenso, texto blanco en peso regular centrado. Bordes redondeados sutiles, apariencia de estado presionado con tono más profundo que denota interacción activa.

Mostrar códigodel ejemplo: Alerta con estado activo

Contenido

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

Alerta con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón rectangular con fondo rojo oscuro, texto blanco en peso normal, y esquinas ligeramente redondeadas. Padding generoso alrededor del texto, tamaño compacto de botón estándar con borde rojo sólido visible.

Mostrar códigodel ejemplo: Alerta con estado hover

Contenido

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

Alerta con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón rectangular con fondo amarillo brillante, texto negro en peso normal, y esquinas ligeramente redondeadas. Borde negro de 2-3px rodea el botón creando un contorno de enfoque visible, padding interno generoso.

Mostrar códigodel ejemplo: Alerta con estado focus

Contenido

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

Alerta deshabilitado

Descripción visual

Botón rectangular con fondo rosa pálido translúcido, texto blanco en peso normal, y esquinas ligeramente redondeadas. Apariencia atenuada sin borde visible, padding interno estándar, opacidad reducida indicando estado inactivo.

Mostrar códigodel ejemplo: Alerta deshabilitado

Contenido

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

Transparente

Descripción visual

Botón con texto azul en fuente regular, sin borde visible, fondo completamente transparente. Elemento clickeable de tamaño compacto con padding mínimo alrededor del texto.

Mostrar códigodel ejemplo: Transparente

Contenido

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

Transparente con estado activo

Simula activar la pseudoclase de CSS :active

Descripción visual

Botón con texto azul en fuente bold (negrita), sin borde visible, fondo completamente transparente. Elemento clickeable de tamaño compacto que muestra énfasis tipográfico mediante el peso de fuente aumentado.

Mostrar códigodel ejemplo: Transparente con estado activo

Contenido

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

Transparente con estado hover

Simula activar la pseudoclase de CSS :hover

Descripción visual

Botón con texto azul subrayado en fuente regular, sin borde visible, fondo gris muy claro (casi blanco). Elemento clickeable de tamaño compacto con padding ligero y decoración de subrayado en el texto.

Mostrar códigodel ejemplo: Transparente con estado hover

Contenido

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

Transparente con estado focus

Simula activar la pseudoclase de CSS :focus

Descripción visual

Botón con fondo amarillo vibrante, texto negro en negrita, y borde negro de 2px. El botón tiene padding moderado, esquinas ligeramente redondeadas, y muestra un estado de enfoque activo con outline visible.

Mostrar códigodel ejemplo: Transparente con estado focus

Contenido

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

Transparente deshabilitado

Descripción visual

Botón con fondo blanco transparente, texto gris claro en peso normal, y sin borde visible. El botón mantiene padding moderado, esquinas ligeramente redondeadas, y transmite un estado inactivo mediante su paleta de colores desaturada.

Mostrar códigodel ejemplo: Transparente deshabilitado

Contenido

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

Anchura completa

Descripción visual

Botón rectangular que ocupa el 100% del ancho del contenedor, con fondo blanco, borde azul de 1px, y texto azul centrado. El botón tiene altura estándar, esquinas ligeramente redondeadas, y padding vertical uniforme que distribuye el espacio alrededor del texto.

Mostrar códigodel ejemplo: Anchura completa

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "text": "Anchura completa",
  "classes": "w-full justify-center"
}) }}

Grande y primario

Descripción visual

Botón rectangular con fondo azul petróleo oscuro, texto blanco en negrita. Esquinas ligeramente redondeadas, padding generoso vertical y horizontal, apariencia prominente de llamada a acción principal.

Mostrar códigodel ejemplo: Grande y primario

Contenido

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

Peque

Descripción visual

Botón rectangular compacto con borde azul petróleo de 1-2px, fondo blanco, texto azul petróleo. Esquinas ligeramente redondeadas, padding reducido vertical y horizontal, estilo de botón secundario outline.

Mostrar códigodel ejemplo: Peque

Contenido

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

Peque tiene selección

Descripción visual

Botón rectangular compacto con borde azul petróleo de 1-2px, fondo blanco, texto azul petróleo. Esquinas ligeramente redondeadas, padding reducido vertical y horizontal, estilo de botón secundario outline.

Mostrar códigodel ejemplo: Peque tiene selección

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "text": "Peque tiene selección",
  "classes": "c-button--sm c-button--has-selection"
}) }}

Enlace

Si añades el atributo href se comporta como un enlace y generará la etiqueta <a> en lugar de la etiqueta <button>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.

Descripción visual

Botón de enlace con texto azul en tamaño estándar, sin fondo visible. El borde azul de 1px rodea el elemento con esquinas redondeadas. El texto aparece centrado dentro del área del botón.

Botón enlace
Mostrar códigodel ejemplo: Enlace

Contenido

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

Botón enlace con target blank

Si añades el atributo href se comporta como un enlace y generará la etiqueta <a> en lugar de la etiqueta <button>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.

Descripción visual

Botón de enlace con texto azul en tamaño estándar, borde azul de 1px con esquinas redondeadas. Incluye un ícono de flecha diagonal pequeño en color azul posicionado a la derecha del texto. El fondo es transparente.

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

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "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

Si añades el atributo href se comporta como un enlace y generará la etiqueta <a> en lugar de la etiqueta <button>. Por lo tanto, semánticamente son diferentes y debes usar el que más se ajuste a tu caso de uso.

Descripción visual

Botón de enlace con texto gris claro en tamaño estándar, borde gris claro de 1px con esquinas redondeadas. El fondo es transparente y el elemento presenta una apariencia visualmente atenuada. El texto aparece centrado dentro del área del botón.

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

Contenido

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

Botón con icono a la derecha

Descripción visual

Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal alineado a la izquierda. Icono azul de un cuadrado con flecha posicionado a la derecha del texto. Padding interno generoso con espaciado horizontal entre texto e icono.

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

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "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>"
}) }}

Botón con icono a la izquierda

Descripción visual

Botón rectangular con borde azul de 1px, fondo blanco, y texto azul en peso normal alineado a la derecha. Icono azul de información circular posicionado a la izquierda del texto. Padding interno generoso con espaciado horizontal entre icono y texto.

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

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "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"
}) }}

Botón atrás

Transparente con icono a la izquierda

Descripción visual

Botón de texto sin borde ni fondo visible, compuesto por flecha azul apuntando a la izquierda seguida de texto azul en peso normal. Layout horizontal compacto con espaciado mínimo entre flecha y texto. Apariencia de enlace interactivo sin contenedor visible.

Volver
Mostrar códigodel ejemplo: Botón atrás

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center mr-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z' fill='currentColor'></path></svg>Volver",
  "href": "/",
  "classes": "c-button--transparent"
}) }}

Botón adelante

Transparente con icono a la derecha

Descripción visual

Botón de texto con label azul oscuro seguido de un ícono de flecha hacia la derecha. Fondo transparente sin borde visible. Dimensiones compactas con padding mínimo alrededor del texto.

Ver más
Mostrar códigodel ejemplo: Botón adelante

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "html": "Ver más<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
  "href": "/",
  "classes": "c-button--transparent"
}) }}

Botón sólo con icono

Descripción visual

Botón cuadrado con fondo azul petróleo sólido conteniendo un ícono de flecha blanca apuntando hacia la derecha. Bordes rectos sin esquinas redondeadas. Tamaño mediano aproximadamente 40x40px con el ícono centrado.

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

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' 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>",
  "classes": "c-button--primary align-bottom"
}) }}

Button peque sólo con icono

Descripción visual

Botón cuadrado con fondo azul petróleo sólido conteniendo un ícono de flecha blanca apuntando hacia la derecha. Bordes rectos sin esquinas redondeadas. Tamaño pequeño aproximadamente 30x30px con el ícono centrado ocupando proporcionalmente el espacio interior.

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

Contenido

Nunjucks macro
{% from "components/button/_macro.button.njk" import componentButton %}
{{ componentButton({
  "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center my-1' 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>",
  "classes": "c-button--primary c-button--sm align-bottom"
}) }}

Input

Descripción visual

Botón rectangular con texto en color azul (aproximadamente #0066CC). Fondo blanco con borde azul de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas.

Mostrar códigodel ejemplo: Input

Contenido

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

Input deshabilitado

Descripción visual

Botón rectangular con texto en color gris medio. Fondo blanco con borde gris claro de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas, apariencia visual que indica estado inactivo.

Mostrar códigodel ejemplo: Input deshabilitado

Contenido

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

Prevenir doble click

Descripción visual

Botón rectangular con texto en color azul (aproximadamente #0066CC). Fondo blanco con borde azul de 1px. Tamaño compacto con padding interno moderado, esquinas ligeramente redondeadas, implementación que bloquea múltiples clics.

Mostrar códigodel ejemplo: Prevenir doble click

Contenido

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