Button. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón

Por defecto #

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button">
  Por defecto
</button>
<!-- /button -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Por defecto"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Por defecto"
}) }}

HTML

<!-- button -->
<button class="c-button">
  Por defecto
</button>
<!-- /button -->

Por defecto con estado activo #

Simula activar la pseudoclase de CSS :active

Ejemplo: "Por defecto con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="active" class="c-button ds-active">
  Activo
</button>
<!-- /button -->

Ejemplo: "Por defecto con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "ds-active"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "ds-active"
}) }}

HTML

<!-- button -->
<button name="active" class="c-button ds-active">
  Activo
</button>
<!-- /button -->

Por defecto con estado hover #

Simula activar la pseudoclase de CSS :hover

Ejemplo: "Por defecto con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="hover" class="c-button ds-hover">
  Hover
</button>
<!-- /button -->

Ejemplo: "Por defecto con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "ds-hover"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "ds-hover"
}) }}

HTML

<!-- button -->
<button name="hover" class="c-button ds-hover">
  Hover
</button>
<!-- /button -->

Por defecto con estado focus #

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Por defecto con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="focus" class="c-button ds-focus">
  Focus
</button>
<!-- /button -->

Ejemplo: "Por defecto con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "ds-focus"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "ds-focus"
}) }}

HTML

<!-- button -->
<button name="focus" class="c-button ds-focus">
  Focus
</button>
<!-- /button -->

Por defecto deshabilitado #

Ejemplo: "Por defecto deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Ejemplo: "Por defecto deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true
}) }}

HTML

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Primario #

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--primary">
  Primario
</button>
<!-- /button -->

Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Primario",
  "classes": "c-button--primary"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Primario",
  "classes": "c-button--primary"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--primary">
  Primario
</button>
<!-- /button -->

Primario con estado activo #

Simula activar la pseudoclase de CSS :active

Ejemplo: "Primario con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="active" class="c-button c-button--primary ds-active">
  Activo
</button>
<!-- /button -->

Ejemplo: "Primario con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--primary ds-active"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--primary ds-active"
}) }}

HTML

<!-- button -->
<button name="active" class="c-button c-button--primary ds-active">
  Activo
</button>
<!-- /button -->

Primario con estado hover #

Simula activar la pseudoclase de CSS :hover

Ejemplo: "Primario con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="hover" class="c-button c-button--primary ds-hover">
  Hover
</button>
<!-- /button -->

Ejemplo: "Primario con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--primary ds-hover"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--primary ds-hover"
}) }}

HTML

<!-- button -->
<button name="hover" class="c-button c-button--primary ds-hover">
  Hover
</button>
<!-- /button -->

Primario con estado focus #

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Primario con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="focus" class="c-button c-button--primary ds-focus">
  Focus
</button>
<!-- /button -->

Ejemplo: "Primario con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--primary ds-focus"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--primary ds-focus"
}) }}

HTML

<!-- button -->
<button name="focus" class="c-button c-button--primary ds-focus">
  Focus
</button>
<!-- /button -->

Primario deshabilitado #

Ejemplo: "Primario deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--primary c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Ejemplo: "Primario deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--primary"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--primary"
}) }}

HTML

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--primary c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Alerta #

Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--alert">
  Alerta
</button>
<!-- /button -->

Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Alerta",
  "classes": "c-button--alert"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Alerta",
  "classes": "c-button--alert"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--alert">
  Alerta
</button>
<!-- /button -->

Alerta con estado activo #

Simula activar la pseudoclase de CSS :active

Ejemplo: "Alerta con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="active" class="c-button c-button--alert ds-active">
  Activo
</button>
<!-- /button -->

Ejemplo: "Alerta con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--alert ds-active"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--alert ds-active"
}) }}

HTML

<!-- button -->
<button name="active" class="c-button c-button--alert ds-active">
  Activo
</button>
<!-- /button -->

Alerta con estado hover #

Simula activar la pseudoclase de CSS :hover

Ejemplo: "Alerta con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="hover" class="c-button c-button--alert ds-hover">
  Hover
</button>
<!-- /button -->

Ejemplo: "Alerta con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--alert ds-hover"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--alert ds-hover"
}) }}

HTML

<!-- button -->
<button name="hover" class="c-button c-button--alert ds-hover">
  Hover
</button>
<!-- /button -->

Alerta con estado focus #

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Alerta con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="focus" class="c-button c-button--alert ds-focus">
  Focus
</button>
<!-- /button -->

Ejemplo: "Alerta con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--alert ds-focus"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--alert ds-focus"
}) }}

HTML

<!-- button -->
<button name="focus" class="c-button c-button--alert ds-focus">
  Focus
</button>
<!-- /button -->

Alerta deshabilitado #

Ejemplo: "Alerta deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--alert c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Ejemplo: "Alerta deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--alert"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--alert"
}) }}

HTML

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--alert c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Transparente #

Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--transparent">
  Transparente
</button>
<!-- /button -->

Ejemplo: "Transparente", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Transparente",
  "classes": "c-button--transparent"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Transparente",
  "classes": "c-button--transparent"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--transparent">
  Transparente
</button>
<!-- /button -->

Transparente con estado activo #

Simula activar la pseudoclase de CSS :active

Ejemplo: "Transparente con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="active" class="c-button c-button--transparent ds-active">
  Activo
</button>
<!-- /button -->

Ejemplo: "Transparente con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--transparent ds-active"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "active",
  "text": "Activo",
  "classes": "c-button--transparent ds-active"
}) }}

HTML

<!-- button -->
<button name="active" class="c-button c-button--transparent ds-active">
  Activo
</button>
<!-- /button -->

Transparente con estado hover #

Simula activar la pseudoclase de CSS :hover

Ejemplo: "Transparente con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="hover" class="c-button c-button--transparent ds-hover">
  Hover
</button>
<!-- /button -->

Ejemplo: "Transparente con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--transparent ds-hover"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button--transparent ds-hover"
}) }}

HTML

<!-- button -->
<button name="hover" class="c-button c-button--transparent ds-hover">
  Hover
</button>
<!-- /button -->

Transparente con estado focus #

Simula activar la pseudoclase de CSS :focus

Ejemplo: "Transparente con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button name="focus" class="c-button c-button--transparent ds-focus">
  Focus
</button>
<!-- /button -->

Ejemplo: "Transparente con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--transparent ds-focus"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "name": "focus",
  "text": "Focus",
  "classes": "c-button--transparent ds-focus"
}) }}

HTML

<!-- button -->
<button name="focus" class="c-button c-button--transparent ds-focus">
  Focus
</button>
<!-- /button -->

Transparente deshabilitado #

Ejemplo: "Transparente deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--transparent c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Ejemplo: "Transparente deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--transparent"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Deshabilitado",
  "disabled": true,
  "classes": "c-button--transparent"
}) }}

HTML

<!-- button -->
<button disabled="disabled" aria-disabled="true" class="c-button c-button--transparent c-button--disabled">
  Deshabilitado
</button>
<!-- /button -->

Anchura completa #

Ejemplo: "Anchura completa", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button w-full justify-center">
  Anchura completa
</button>
<!-- /button -->

Ejemplo: "Anchura completa", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Anchura completa",
  "classes": "w-full justify-center"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Anchura completa",
  "classes": "w-full justify-center"
}) }}

HTML

<!-- button -->
<button class="c-button w-full justify-center">
  Anchura completa
</button>
<!-- /button -->

Grande y primario #

Ejemplo: "Grande y primario", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--lg c-button--primary">
  Grande y primario
</button>
<!-- /button -->

Ejemplo: "Grande y primario", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Grande y primario",
  "classes": "c-button--lg c-button--primary"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Grande y primario",
  "classes": "c-button--lg c-button--primary"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--lg c-button--primary">
  Grande y primario
</button>
<!-- /button -->

Peque #

Ejemplo: "Peque", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--sm">
  Peque
</button>
<!-- /button -->

Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Peque",
  "classes": "c-button--sm"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Peque",
  "classes": "c-button--sm"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--sm">
  Peque
</button>
<!-- /button -->

Peque tiene selección #

Ejemplo: "Peque tiene selección", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--sm c-button--has-selection">
  Peque tiene selección
</button>
<!-- /button -->

Ejemplo: "Peque tiene selección", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Peque tiene selección",
  "classes": "c-button--sm c-button--has-selection"
}) }}

Mostrar código

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"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--sm c-button--has-selection">
  Peque tiene selección
</button>
<!-- /button -->

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.

Ejemplo: "Enlace", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<a href="/" draggable="false" class="c-button">
  Botón enlace
</a>
<!-- /button -->

Ejemplo: "Enlace", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Botón enlace",
  "href": "/"
}) }}

Botón enlace

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Botón enlace",
  "href": "/"
}) }}

HTML

<!-- button -->
<a href="/" draggable="false" class="c-button">
  Botón enlace
</a>
<!-- /button -->

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.

Ejemplo: "Botón enlace con target blank", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<a href="http://www.google.com" draggable="false" target="_blank" class="c-button" title="Se abre en ventana nueva">
  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>
</a>
<!-- /button -->

Ejemplo: "Botón enlace con target blank", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
  }
}) }}

Botón enlace con target

Mostrar código

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"
  }
}) }}

HTML

<!-- button -->
<a href="http://www.google.com" draggable="false" target="_blank" class="c-button" title="Se abre en ventana nueva">
  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>
</a>
<!-- /button -->

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.

Ejemplo: "Enlace deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<a href="/" draggable="false" tabindex="-1" class="c-button c-button--disabled">
  Botón enlace deshabilitado
</a>
<!-- /button -->

Ejemplo: "Enlace deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Botón enlace deshabilitado",
  "href": "/",
  "disabled": true
}) }}

Botón enlace deshabilitado

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Botón enlace deshabilitado",
  "href": "/",
  "disabled": true
}) }}

HTML

<!-- button -->
<a href="/" draggable="false" tabindex="-1" class="c-button c-button--disabled">
  Botón enlace deshabilitado
</a>
<!-- /button -->

Botón con icono a la derecha #

Ejemplo: "Botón con icono a la derecha", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button">
  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>
</button>
<!-- /button -->

Ejemplo: "Botón con icono a la derecha", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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>"
}) }}

Mostrar código

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>"
}) }}

HTML

<!-- button -->
<button class="c-button">
  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>
</button>
<!-- /button -->

Botón con icono a la izquierda #

Ejemplo: "Botón con icono a la izquierda", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button">
  <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
</button>
<!-- /button -->

Ejemplo: "Botón con icono a la izquierda", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Mostrar código

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"
}) }}

HTML

<!-- button -->
<button class="c-button">
  <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
</button>
<!-- /button -->

Botón atrás #

Transparente con icono a la izquierda

Ejemplo: "Botón atrás", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<a href="/" draggable="false" class="c-button c-button--transparent">
  <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
</a>
<!-- /button -->

Ejemplo: "Botón atrás", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Volver

Mostrar código

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"
}) }}

HTML

<!-- button -->
<a href="/" draggable="false" class="c-button c-button--transparent">
  <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
</a>
<!-- /button -->

Botón adelante #

Transparente con icono a la derecha

Ejemplo: "Botón adelante", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<a href="/" draggable="false" class="c-button c-button--transparent">
  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>
</a>
<!-- /button -->

Ejemplo: "Botón adelante", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Mostrar código

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"
}) }}

HTML

<!-- button -->
<a href="/" draggable="false" class="c-button c-button--transparent">
  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>
</a>
<!-- /button -->

Botón sólo con icono #

Ejemplo: "Botón sólo con icono", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--primary align-bottom">
  <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>
</button>
<!-- /button -->

Ejemplo: "Botón sólo con icono", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Mostrar código

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"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--primary align-bottom">
  <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>
</button>
<!-- /button -->

Button peque sólo con icono #

Ejemplo: "Button peque sólo con icono", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button class="c-button c-button--primary c-button--sm align-bottom">
  <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>
</button>
<!-- /button -->

Ejemplo: "Button peque sólo con icono", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Mostrar código

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"
}) }}

HTML

<!-- button -->
<button class="c-button c-button--primary c-button--sm align-bottom">
  <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>
</button>
<!-- /button -->

Input #

Ejemplo: "Input", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<input value="Enviar" type="submit" name="send-form" class="c-button">
<!-- /button -->

Ejemplo: "Input", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "element": "input",
  "name": "send-form",
  "text": "Enviar"
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "element": "input",
  "name": "send-form",
  "text": "Enviar"
}) }}

HTML

<!-- button -->
<input value="Enviar" type="submit" name="send-form" class="c-button">
<!-- /button -->

Input deshabilitado #

Ejemplo: "Input deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<input value="Enviar" type="submit" disabled="disabled" aria-disabled="true" class="c-button c-button--disabled">
<!-- /button -->

Ejemplo: "Input deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "element": "input",
  "text": "Enviar",
  "disabled": true
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "element": "input",
  "text": "Enviar",
  "disabled": true
}) }}

HTML

<!-- button -->
<input value="Enviar" type="submit" disabled="disabled" aria-disabled="true" class="c-button c-button--disabled">
<!-- /button -->

Prevenir doble click #

Ejemplo: "Prevenir doble click", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- button -->
<button data-prevent-double-click="true" class="c-button">
  Enviar
</button>
<!-- /button -->

Ejemplo: "Prevenir doble click", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Enviar",
  "preventDoubleClick": true
}) }}

Mostrar código

Contenido

Nunjucks macro

{% from "components/button/_macro.button.njk" import componentButton %}

{{ componentButton({
  "text": "Enviar",
  "preventDoubleClick": true
}) }}

HTML

<!-- button -->
<button data-prevent-double-click="true" class="c-button">
  Enviar
</button>
<!-- /button -->

Button

Parámetros Nunjucks del componente: "Button". Versión: 13.0.1

Por defecto #

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Por defecto con estado activo #

Ejemplo: "Por defecto con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Por defecto con estado hover #

Ejemplo: "Por defecto con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Por defecto con estado focus #

Ejemplo: "Por defecto con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Por defecto deshabilitado #

Ejemplo: "Por defecto deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Por defecto deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Primario #

Ejemplo: "Primario", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Primario con estado activo #

Ejemplo: "Primario con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Primario con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Primario con estado hover #

Ejemplo: "Primario con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Primario con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Primario con estado focus #

Ejemplo: "Primario con estado focus", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Primario con estado focus", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Primario deshabilitado #

Ejemplo: "Primario deshabilitado", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Primario deshabilitado", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Alerta #

Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Alerta con estado activo #

Ejemplo: "Alerta con estado activo", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Alerta con estado activo", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML

Alerta con estado hover #

Ejemplo: "Alerta con estado hover", de código HTML, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Ejemplo: "Alerta con estado hover", de código Nunjucks, para maquetar el componente: "Button", versión: 13.0.1, del sistema de diseño DESY

Contenido

Nunjucks macro

HTML