Botones
Componentes principales
Los botones son elementos sobre los que se puede interactuar para realizar acciones o navegar.
Button-loader
Parámetros Nunjucks del componente: "Button-loader". Versión: 5.0.2
Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.
{"val":"params:\n- name: element\n type: string\n required: false\n description: Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.\n- name: text\n type: string\n required: true\n description: If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.\n- name: html\n type: string\n required: true\n description: If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.\n- name: name\n type: string\n required: false\n description: Name for the `input` or `button`. This has no effect on `a` elements.\n- name: type\n type: string\n required: false\n description: Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.\n- name: value\n type: string\n required: false\n description: Value for the `button` tag. This has no effect on `a` or `input` elements.\n- name: disabled\n type: boolean\n required: false\n description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.\n- name: href\n type: string\n required: false\n description: The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.\n- name: target\n type: string\n required: false\n description: The target where the button should link to.\n- name: state\n type: string\n required: false\n description: If `is-loading`. Shows the loading state and updates aria-live text for screenreaders. I `is-success` shows the success state. If not set, shows normal state.\n- name: loader\n type: object\n required: false\n description: Options for the spinner inside the button\n params:\n - name: text\n type: string\n required: false\n description: Text for screenreaders.\n - name: classes\n type: string\n required: false\n description: Classes to add to the spinner component.\n- name: success\n type: object\n required: false\n description: Options for the success icon inside the button\n params:\n - name: text\n type: string\n required: false\n description: Text for screenreaders.\n- name: classes\n type: string\n required: false\n description: Classes to add to the button component.\n- name: attributes\n type: object\n required: false\n description: HTML attributes (for example data attributes) to add to the button component.\n- name: preventDoubleClick\n type: boolean\n required: false\n description: Prevent accidental double clicks on submit buttons from submitting forms multiple times","length":3099}
Mostrar parámetros
Parámetros Nunjucks del componente: "Button-loader"
params:
- name: element
type: string
required: false
description: Whether to use an `input`, `button` or `a` element to create the button. In most cases you will not need to set this as it will be configured automatically if you use `href` or `html`.
- name: text
type: string
required: true
description: If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
- name: html
type: string
required: true
description: If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`.
- name: name
type: string
required: false
description: Name for the `input` or `button`. This has no effect on `a` elements.
- name: type
type: string
required: false
description: Type of `input` or `button` – `button`, `submit` or `reset`. Defaults to `submit`. This has no effect on `a` elements.
- name: value
type: string
required: false
description: Value for the `button` tag. This has no effect on `a` or `input` elements.
- name: disabled
type: boolean
required: false
description: Whether the button should be disabled. For button and input elements, `disabled` and `aria-disabled` attributes will be set automatically.
- name: href
type: string
required: false
description: The URL that the button should link to. If this is set, `element` will be automatically set to `a` if it has not already been defined.
- name: target
type: string
required: false
description: The target where the button should link to.
- name: state
type: string
required: false
description: If `is-loading`. Shows the loading state and updates aria-live text for screenreaders. I `is-success` shows the success state. If not set, shows normal state.
- name: loader
type: object
required: false
description: Options for the spinner inside the button
params:
- name: text
type: string
required: false
description: Text for screenreaders.
- name: classes
type: string
required: false
description: Classes to add to the spinner component.
- name: success
type: object
required: false
description: Options for the success icon inside the button
params:
- name: text
type: string
required: false
description: Text for screenreaders.
- name: classes
type: string
required: false
description: Classes to add to the button component.
- name: attributes
type: object
required: false
description: HTML attributes (for example data attributes) to add to the button component.
- name: preventDoubleClick
type: boolean
required: false
description: Prevent accidental double clicks on submit buttons from submitting forms multiple times
Por defecto #
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Por defecto
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Por defecto"
}) }}
Acción en curso
Por defecto
Mostrar códigodel ejemplo: Por defecto
Por defecto con el estado cargando #
Simula activar el estado cargando
Ejemplo: "Por defecto con el estado cargando", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button name="loading" class="c-button-loader relative c-button-loader--is-loading" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Cargando
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto con el estado cargando", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "loading",
"text": "Cargando",
"state": "is-loading",
"classes": "c-button-loader--is-loading",
"loader": {
"text": "Acción en curso"
}
}) }}
Mostrar códigodel ejemplo: Por defecto con el estado cargando
Por defecto con estado éxito #
Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.
Ejemplo: "Por defecto con estado éxito", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button name="éxito" class="c-button-loader relative c-button-loader--is-success" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Éxito
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto con estado éxito", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "éxito",
"text": "Éxito",
"state": "is-success",
"success": {
"text": "Acción realizada con éxito"
},
"classes": "c-button-loader--is-success"
}) }}
Mostrar códigodel ejemplo: Por defecto con estado éxito
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 Loader", versión: 5.0.2, 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-loader -->
<button name="active" class="c-button-loader relative ds-active" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Activo
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto con estado activo", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "ds-active"
}) }}
Mostrar códigodel ejemplo: Por defecto con estado activo
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 Loader", versión: 5.0.2, 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-loader -->
<button name="hover" class="c-button-loader relative ds-hover" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Hover
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto con estado hover", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "ds-hover"
}) }}
Mostrar códigodel ejemplo: Por defecto con estado hover
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 Loader", versión: 5.0.2, 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-loader -->
<button name="focus" class="c-button-loader relative ds-focus" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Focus
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto con estado focus", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "ds-focus"
}) }}
Mostrar códigodel ejemplo: Por defecto con estado focus
Por defecto deshabilitado #
Ejemplo: "Por defecto deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button disabled="disabled" aria-disabled="true" class="c-button-loader relative c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Deshabilitado
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Por defecto deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true
}) }}
Acción en curso
Deshabilitado
Mostrar códigodel ejemplo: Por defecto deshabilitado
Primario #
Ejemplo: "Primario", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative c-button-loader--primary" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Primario
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Primario", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Primario",
"classes": "c-button-loader--primary"
}) }}
Mostrar códigodel ejemplo: Primario
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 Loader", versión: 5.0.2, 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-loader -->
<button name="active" class="c-button-loader relative c-button-loader--primary ds-active" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Activo
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Primario con estado activo", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--primary ds-active"
}) }}
Mostrar códigodel ejemplo: Primario con estado activo
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 Loader", versión: 5.0.2, 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-loader -->
<button name="hover" class="c-button-loader relative c-button-loader--primary ds-hover" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Hover
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Primario con estado hover", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--primary ds-hover"
}) }}
Mostrar códigodel ejemplo: Primario con estado hover
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 Loader", versión: 5.0.2, 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-loader -->
<button name="focus" class="c-button-loader relative c-button-loader--primary ds-focus" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Focus
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Primario con estado focus", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--primary ds-focus"
}) }}
Mostrar códigodel ejemplo: Primario con estado focus
Primario deshabilitado #
Ejemplo: "Primario deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button disabled="disabled" aria-disabled="true" class="c-button-loader relative c-button-loader--primary c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Deshabilitado
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Primario deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--primary"
}) }}
Acción en curso
Deshabilitado
Mostrar códigodel ejemplo: Primario deshabilitado
Alerta #
Ejemplo: "Alerta", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative c-button-loader--alert" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Alerta
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Alerta", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Alerta",
"classes": "c-button-loader--alert"
}) }}
Mostrar códigodel ejemplo: Alerta
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 Loader", versión: 5.0.2, 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-loader -->
<button name="active" class="c-button-loader relative c-button-loader--alert ds-active" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Activo
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Alerta con estado activo", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--alert ds-active"
}) }}
Mostrar códigodel ejemplo: Alerta con estado activo
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 Loader", versión: 5.0.2, 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-loader -->
<button name="hover" class="c-button-loader relative c-button-loader--alert ds-hover" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Hover
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Alerta con estado hover", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--alert ds-hover"
}) }}
Mostrar códigodel ejemplo: Alerta con estado hover
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 Loader", versión: 5.0.2, 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-loader -->
<button name="focus" class="c-button-loader relative c-button-loader--alert ds-focus" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Focus
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Alerta con estado focus", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--alert ds-focus"
}) }}
Mostrar códigodel ejemplo: Alerta con estado focus
Alerta deshabilitado #
Ejemplo: "Alerta deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button disabled="disabled" aria-disabled="true" class="c-button-loader relative c-button-loader--alert c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Deshabilitado
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Alerta deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--alert"
}) }}
Acción en curso
Deshabilitado
Mostrar códigodel ejemplo: Alerta deshabilitado
Transparente #
Ejemplo: "Transparente", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative c-button-loader--transparent" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Transparente
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Transparente", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Transparente",
"classes": "c-button-loader--transparent"
}) }}
Acción en curso
Transparente
Mostrar códigodel ejemplo: Transparente
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 Loader", versión: 5.0.2, 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-loader -->
<button name="active" class="c-button-loader relative c-button-loader--transparent ds-active" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Activo
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Transparente con estado activo", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--transparent ds-active"
}) }}
Mostrar códigodel ejemplo: Transparente con estado activo
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 Loader", versión: 5.0.2, 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-loader -->
<button name="hover" class="c-button-loader relative c-button-loader--transparent ds-hover" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Hover
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Transparente con estado hover", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--transparent ds-hover"
}) }}
Mostrar códigodel ejemplo: Transparente con estado hover
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 Loader", versión: 5.0.2, 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-loader -->
<button name="focus" class="c-button-loader relative c-button-loader--transparent ds-focus" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Focus
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Transparente con estado focus", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--transparent ds-focus"
}) }}
Mostrar códigodel ejemplo: Transparente con estado focus
Transparente deshabilitado #
Ejemplo: "Transparente deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button disabled="disabled" aria-disabled="true" class="c-button-loader relative c-button-loader--transparent c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Deshabilitado
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Transparente deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--transparent"
}) }}
Acción en curso
Deshabilitado
Mostrar códigodel ejemplo: Transparente deshabilitado
Grande #
Ejemplo: "Grande", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative c-button-loader--lg c-button-loader--primary" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Grande y primario
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Grande", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Grande y primario",
"classes": "c-button-loader--lg c-button-loader--primary"
}) }}
Acción en curso
Grande y primario
Mostrar códigodel ejemplo: Grande
Peque #
Ejemplo: "Peque", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button class="c-button-loader relative c-button-loader--sm" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Peque
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Peque", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Peque",
"classes": "c-button-loader--sm"
}) }}
Mostrar códigodel ejemplo: Peque
Enlace #
Ejemplo: "Enlace", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Botón enlace
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Enlace", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Botón enlace",
"href": "/"
}) }}
Mostrar códigodel ejemplo: Enlace
Botón enlace con target blank #
Ejemplo: "Botón enlace con target blank", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="http://www.google.com" draggable="false" target="_blank" class="c-button-loader relative" data-module="c-button-loader" title="Se abre en ventana nueva">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
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>
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Botón enlace con target blank", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "Botón enlace con target <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='0.8em' width='0.8em' class='self-center ml-sm' aria-hidden='true' focusable='false' role='presentation'><g><path id='Union' fill='currentcolor' fill-rule='evenodd' d='M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"href": "http://www.google.com",
"target": "_blank",
"attributes": {
"title": "Se abre en ventana nueva"
}
}) }}
Mostrar códigodel ejemplo: Botón enlace con target blank
Enlace deshabilitado #
Ejemplo: "Enlace deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Botón enlace deshabilitado
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Enlace deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Botón enlace deshabilitado",
"href": "/",
"disabled": true
}) }}
Mostrar códigodel ejemplo: Enlace deshabilitado
Botón con icono a la derecha #
Ejemplo: "Botón con icono a la derecha", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
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>
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Botón con icono a la derecha", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "Botón con icono<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center ml-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"href": "/"
}) }}
Mostrar códigodel ejemplo: Botón con icono a la derecha
Botón con icono a la izquierda #
Ejemplo: "Botón con icono a la izquierda", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
<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
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Botón con icono a la izquierda", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center mr-2' aria-hidden='true' focusable='false' role='presentation'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>Botón con icono",
"href": "/"
}) }}
Mostrar códigodel ejemplo: Botón con icono a la izquierda
Botón sólo con icono #
Ejemplo: "Botón sólo con icono", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative c-button-loader--primary p-3 align-bottom" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="presentation" aria-label="Borrar">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Botón sólo con icono", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"href": "/",
"classes": "c-button-loader--primary p-3 align-bottom"
}) }}
Mostrar códigodel ejemplo: Botón sólo con icono
Ejemplo: "Button peque sólo con icono", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<a href="/" draggable="false" class="c-button-loader relative c-button-loader--primary c-button-loader--sm p-2 align-bottom" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center" aria-hidden="true" focusable="false" role="presentation" aria-label="Borrar">
<g>
<path fill="currentcolor" fill-rule="evenodd" d="M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z" clip-rule="evenodd" stroke-width="1"></path>
</g>
</svg>
</span>
</a>
<!-- /button-loader -->
Ejemplo: "Button peque sólo con icono", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' height='1em' width='1em' class='self-center' aria-hidden='true' focusable='false' role='presentation' aria-label='Borrar'><g><path fill='currentcolor' fill-rule='evenodd' d='M6.585782857142856 2.3000685714285716C6.960857142857142 1.9249942857142854 7.469565714285714 1.7142857142857142 8 1.7142857142857142c0.5304342857142856 0 1.0391428571428571 0.2107085714285714 1.4142171428571428 0.5857828571428572 0.2369828571428571 0.2369942857142857 0.4083542857142857 0.5273257142857143 0.5024114285714285 0.8427885714285713h-3.8332571428571427c0.09405714285714285 -0.3154628571428571 0.2654285714285714 -0.6057942857142857 0.5024114285714285 -0.8427885714285713ZM4.3299199999999995 3.142857142857143c0.12042285714285714 -0.7734742857142857 0.48325714285714283 -1.4945485714285713 1.04368 -2.054968C6.070171428571428 0.3913257142857143 7.014914285714285 0 8 0c0.9850857142857142 0 1.9298285714285714 0.3913257142857143 2.6264 1.0878891428571429 0.5604228571428571 0.5604194285714286 0.9233142857142856 1.2814937142857143 1.0436571428571428 2.054968H14.571428571428571c0.47337142857142855 0 0.8571428571428571 0.38375999999999993 0.8571428571428571 0.8571428571428571s-0.38377142857142854 0.8571428571428571 -0.8571428571428571 0.8571428571428571H13.714285714285714v9.428571428571429c0 0.4546285714285714 -0.18057142857142855 0.8907428571428571 -0.5020571428571429 1.2122285714285714S12.454628571428572 16 12 16h-8c-0.45466285714285715 0 -0.8906971428571429 -0.18057142857142855 -1.212182857142857 -0.5020571428571429C2.466331428571429 15.176457142857142 2.2857142857142856 14.740342857142856 2.2857142857142856 14.285714285714285V4.857142857142857h-0.8571428571428571C0.955184 4.857142857142857 0.5714285714285714 4.473382857142857 0.5714285714285714 4s0.3837554285714285 -0.8571428571428571 0.8571428571428571 -0.8571428571428571h2.901348571428571ZM6 6.715954285714285c0.39449142857142855 0 0.7142857142857142 0.3198057142857143 0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 -0.3197942857142857 0.7142857142857142 -0.7142857142857142 0.7142857142857142s-0.7142857142857142 -0.3198857142857143 -0.7142857142857142 -0.7142857142857142V7.4302399999999995c0 -0.39447999999999994 0.3197942857142857 -0.7142857142857142 0.7142857142857142 -0.7142857142857142Zm4.714285714285714 0.7142857142857142c0 -0.39447999999999994 -0.3197942857142857 -0.7142857142857142 -0.7142857142857142 -0.7142857142857142s-0.7142857142857142 0.3198057142857143 -0.7142857142857142 0.7142857142857142V12.003428571428572c0 0.3944 0.3197942857142857 0.7142857142857142 0.7142857142857142 0.7142857142857142s0.7142857142857142 -0.3198857142857143 0.7142857142857142 -0.7142857142857142V7.4302399999999995Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
"href": "/",
"classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
}) }}
Mostrar códigodel ejemplo: Button peque sólo con icono
Ejemplo: "Input", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<div class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__content inline-flex align-baseline">
<input name="send-form" value="Enviar" type="submit" class="bg-transparent font-semibold">
</span>
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
</div>
<!-- /button-loader -->
Ejemplo: "Input", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"element": "input",
"name": "send-form",
"text": "Enviar"
}) }}
Mostrar códigodel ejemplo: Input
Ejemplo: "Input deshabilitado", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<div class="c-button-loader relative c-button-loader--disabled" data-module="c-button-loader">
<span class="c-button-loader__content inline-flex align-baseline">
<input disabled="disabled" aria-disabled="true" value="Enviar" type="submit" class="bg-transparent font-semibold">
</span>
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
</div>
<!-- /button-loader -->
Ejemplo: "Input deshabilitado", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"element": "input",
"text": "Enviar",
"disabled": true
}) }}
Mostrar códigodel ejemplo: Input deshabilitado
Prevenir doble click #
Ejemplo: "Prevenir doble click", de código HTML, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader -->
<button data-prevent-double-click="true" class="c-button-loader relative" data-module="c-button-loader">
<span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
<!-- spinner -->
<span class="c-spinner " data-module="c-spinner">
<span class="sr-only" role="alert" aria-live="assertive">
Acción en curso
</span>
</span>
<!-- /spinner -->
</span>
<span class="c-button-loader__success flex items-center justify-center absolute inset-0">
<span class="sr-only" role="alert" aria-live="assertive">
</span>
<span aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-hidden="true" width="1em" height="1em">
<path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"></path>
</svg></span>
</span>
<span class="c-button-loader__content inline-flex align-baseline">
Enviar
</span>
</button>
<!-- /button-loader -->
Ejemplo: "Prevenir doble click", de código Nunjucks, para maquetar el componente: "Button Loader", versión: 5.0.2, 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-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Enviar",
"preventDoubleClick": true
}) }}
Mostrar códigodel ejemplo: Prevenir doble click