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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Enlace

Mostrar códigodel ejemplo: Enlace

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Botón enlace con target blank

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

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Enlace deshabilitado

Mostrar códigodel ejemplo: Enlace deshabilitado

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Botón con icono a la derecha

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

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Botón con icono a la izquierda

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

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Botón sólo con icono

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

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Button peque sólo con icono

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

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Input

Acción en curso
Mostrar códigodel ejemplo: Input

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Input deshabilitado

Acción en curso
Mostrar códigodel ejemplo: Input deshabilitado

Contenido

Nunjucks macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}

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

Prevenir doble click

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