Button-loader
Mostrar parámetros
Parámetros del componente
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 #
Mostrar códigodel ejemplo: Por defecto
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Por defecto"
}) }}
HTML
<!-- 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 -->
Por defecto con el estado cargando #
Simula activar el estado cargando
Mostrar códigodel ejemplo: Por defecto con el estado cargando
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "loading",
"text": "Cargando",
"state": "is-loading",
"classes": "c-button-loader--is-loading",
"loader": {
"text": "Acción en curso"
}
}) }}
HTML
<!-- 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 -->
Por defecto con estado éxito #
Simula activar el estado éxito que sólo se muestra durante unos segundos, luego vuelve al estado inicial.
Mostrar códigodel ejemplo: Por defecto con estado éxito
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "éxito",
"text": "Éxito",
"state": "is-success",
"success": {
"text": "Acción realizada con éxito"
},
"classes": "c-button-loader--is-success"
}) }}
HTML
<!-- 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 -->
Por defecto con estado activo #
Simula activar la pseudoclase de CSS :active
Mostrar códigodel ejemplo: Por defecto con estado activo
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "ds-active"
}) }}
HTML
<!-- 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 -->
Por defecto con estado hover #
Simula activar la pseudoclase de CSS :hover
Mostrar códigodel ejemplo: Por defecto con estado hover
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "ds-hover"
}) }}
HTML
<!-- 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 -->
Por defecto con estado focus #
Simula activar la pseudoclase de CSS :focus
Mostrar códigodel ejemplo: Por defecto con estado focus
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "ds-focus"
}) }}
HTML
<!-- 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 -->
Por defecto deshabilitado #
Mostrar códigodel ejemplo: Por defecto deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true
}) }}
HTML
<!-- 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 -->
Primario #
Mostrar códigodel ejemplo: Primario
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Primario",
"classes": "c-button-loader--primary"
}) }}
HTML
<!-- 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 -->
Primario con estado activo #
Simula activar la pseudoclase de CSS :active
Mostrar códigodel ejemplo: Primario con estado activo
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--primary ds-active"
}) }}
HTML
<!-- 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 -->
Primario con estado hover #
Simula activar la pseudoclase de CSS :hover
Mostrar códigodel ejemplo: Primario con estado hover
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--primary ds-hover"
}) }}
HTML
<!-- 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 -->
Primario con estado focus #
Simula activar la pseudoclase de CSS :focus
Mostrar códigodel ejemplo: Primario con estado focus
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--primary ds-focus"
}) }}
HTML
<!-- 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 -->
Primario deshabilitado #
Mostrar códigodel ejemplo: Primario deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--primary"
}) }}
HTML
<!-- 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 -->
Alerta #
Mostrar códigodel ejemplo: Alerta
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Alerta",
"classes": "c-button-loader--alert"
}) }}
HTML
<!-- 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 -->
Alerta con estado activo #
Simula activar la pseudoclase de CSS :active
Mostrar códigodel ejemplo: Alerta con estado activo
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--alert ds-active"
}) }}
HTML
<!-- 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 -->
Alerta con estado hover #
Simula activar la pseudoclase de CSS :hover
Mostrar códigodel ejemplo: Alerta con estado hover
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--alert ds-hover"
}) }}
HTML
<!-- 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 -->
Alerta con estado focus #
Simula activar la pseudoclase de CSS :focus
Mostrar códigodel ejemplo: Alerta con estado focus
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--alert ds-focus"
}) }}
HTML
<!-- 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 -->
Alerta deshabilitado #
Mostrar códigodel ejemplo: Alerta deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--alert"
}) }}
HTML
<!-- 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 -->
Transparente #
Mostrar códigodel ejemplo: Transparente
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Transparente",
"classes": "c-button-loader--transparent"
}) }}
HTML
<!-- 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 -->
Transparente con estado activo #
Simula activar la pseudoclase de CSS :active
Mostrar códigodel ejemplo: Transparente con estado activo
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "active",
"text": "Activo",
"classes": "c-button-loader--transparent ds-active"
}) }}
HTML
<!-- 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 -->
Transparente con estado hover #
Simula activar la pseudoclase de CSS :hover
Mostrar códigodel ejemplo: Transparente con estado hover
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "hover",
"text": "Hover",
"classes": "c-button-loader--transparent ds-hover"
}) }}
HTML
<!-- 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 -->
Transparente con estado focus #
Simula activar la pseudoclase de CSS :focus
Mostrar códigodel ejemplo: Transparente con estado focus
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"name": "focus",
"text": "Focus",
"classes": "c-button-loader--transparent ds-focus"
}) }}
HTML
<!-- 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 -->
Transparente deshabilitado #
Mostrar códigodel ejemplo: Transparente deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Deshabilitado",
"disabled": true,
"classes": "c-button-loader--transparent"
}) }}
HTML
<!-- 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 -->
Peque #
Mostrar códigodel ejemplo: Peque
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Peque",
"classes": "c-button-loader--sm"
}) }}
HTML
<!-- 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 -->
Enlace #
Mostrar códigodel ejemplo: Enlace
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Botón enlace",
"href": "/"
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 -->
Botón enlace con target blank #
Mostrar códigodel ejemplo: Botón enlace con target blank
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Botón enlace con target",
"href": "http://www.google.com",
"target": "_blank"
}) }}
HTML
<!-- button-loader -->
<a href="http://www.google.com" role="button" draggable="false" target="_blank" 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 con target
</span>
</a>
<!-- /button-loader -->
Enlace deshabilitado #
Mostrar códigodel ejemplo: Enlace deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Botón enlace deshabilitado",
"href": "/",
"disabled": true
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 -->
Botón con icono a la derecha #
Mostrar códigodel ejemplo: Botón con icono a la derecha
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "Botón con icono<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center ml-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
"href": "/"
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" />
</svg>
</span>
</a>
<!-- /button-loader -->
Botón con icono a la izquierda #
Mostrar códigodel ejemplo: Botón con icono a la izquierda
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center mr-2\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>Botón con icono",
"href": "/"
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em">
<path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" />
</svg>Botón con icono
</span>
</a>
<!-- /button-loader -->
Botón sólo con icono #
Mostrar códigodel ejemplo: Botón sólo con icono
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
"href": "/",
"classes": "c-button-loader--primary p-3 align-bottom"
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar">
<path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" />
</svg>
</span>
</a>
<!-- /button-loader -->
Button peque sólo con icono #
Mostrar códigodel ejemplo: Button peque sólo con icono
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
"href": "/",
"classes": "c-button-loader--primary c-button-loader--sm p-2 align-bottom"
}) }}
HTML
<!-- button-loader -->
<a href="/" role="button" 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 140 140" class="self-center" aria-hidden="true" focusable="false" width="1em" height="1em" role="img" aria-label="Borrar">
<path d="M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z" fill="currentColor" />
</svg>
</span>
</a>
<!-- /button-loader -->
Input #
Mostrar códigodel ejemplo: Input
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"element": "input",
"name": "send-form",
"text": "Enviar"
}) }}
HTML
<!-- 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 -->
Input deshabilitado #
Mostrar códigodel ejemplo: Input deshabilitado
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"element": "input",
"text": "Enviar",
"disabled": true
}) }}
HTML
<!-- 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 -->
Prevenir doble click #
Mostrar códigodel ejemplo: Prevenir doble click
Contenido
Nunjucks macro
{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
"text": "Enviar",
"preventDoubleClick": true
}) }}
HTML
<!-- 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 -->