Button-loader examples

Show params

Params

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

default

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Default"
})  }}

Markup







<!-- button-loader --><button x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Default
  </span>
</button><!-- /button-loader -->

default with loading state

Simulate triggering the loading state

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "loading",
  "text": "Loading",
  "state": "is-loading",
  "classes": "c-button-loader--is-loading",
  "loader": {
    "text": "Acción en curso"
  }
})  }}

Markup







<!-- button-loader --><button name="loading" x-data="{ state: 'is-loading' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
  <p class="sr-only" role="alert" aria-live="assertive">
    Acción en curso
  </p>
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Loading
  </span>
</button><!-- /button-loader -->

default with success state

Simulate triggering the success state that only displays for seconds, then reverts to initial state

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "success",
  "text": "Success",
  "state": "is-success",
  "success": {
    "text": "Acción realizada con éxito"
  },
  "classes": "c-button-loader--is-success"
})  }}

Markup







<!-- button-loader --><button name="success" x-data="{ state: 'is-success' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con é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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Success
  </span>
</button><!-- /button-loader -->

default with active state

Simulate triggering the :active CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Active",
  "classes": "ds-active"
})  }}

Markup







<!-- button-loader --><button name="active" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Active
  </span>
</button><!-- /button-loader -->

default with hover state

Simulate triggering the :hover CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hovered",
  "classes": "ds-hover"
})  }}

Markup







<!-- button-loader --><button name="hover" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Hovered
  </span>
</button><!-- /button-loader -->

default with focus state

Simulate triggering the :focus CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "focus",
  "text": "Focussed",
  "classes": "ds-focus"
})  }}

Markup







<!-- button-loader --><button name="focus" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Focussed
  </span>
</button><!-- /button-loader -->

default disabled

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Disabled",
  "disabled": true
})  }}

Markup







<!-- button-loader --><button disabled="disabled" aria-disabled="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Disabled
  </span>
</button><!-- /button-loader -->

primary

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Primary",
  "classes": "c-button-loader--primary"
})  }}

Markup







<!-- button-loader --><button x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Primary
  </span>
</button><!-- /button-loader -->

primary with active state

Simulate triggering the :active CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Active",
  "classes": "c-button-loader--primary ds-active"
})  }}

Markup







<!-- button-loader --><button name="active" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Active
  </span>
</button><!-- /button-loader -->

primary with hover state

Simulate triggering the :hover CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "hover",
  "text": "Hover",
  "classes": "c-button-loader--primary ds-hover"
})  }}

Markup







<!-- button-loader --><button name="hover" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Hover
  </span>
</button><!-- /button-loader -->

primary with focus state

Simulate triggering the :focus CSS pseudo-class

Show code

Macro

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

Markup







<!-- button-loader --><button name="focus" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Focus
  </span>
</button><!-- /button-loader -->

primary disabled

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Disabled",
  "disabled": true,
  "classes": "c-button-loader--primary"
})  }}

Markup







<!-- button-loader --><button disabled="disabled" aria-disabled="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Disabled
  </span>
</button><!-- /button-loader -->

alert

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Alert",
  "classes": "c-button-loader--alert"
})  }}

Markup







<!-- button-loader --><button x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Alert
  </span>
</button><!-- /button-loader -->

alert with active state

Simulate triggering the :active CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Active",
  "classes": "c-button-loader--alert ds-active"
})  }}

Markup







<!-- button-loader --><button name="active" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Active
  </span>
</button><!-- /button-loader -->

alert with hover state

Simulate triggering the :hover CSS pseudo-class

Show code

Macro

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

Markup







<!-- button-loader --><button name="hover" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Hover
  </span>
</button><!-- /button-loader -->

alert with focus state

Simulate triggering the :focus CSS pseudo-class

Show code

Macro

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

Markup







<!-- button-loader --><button name="focus" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Focus
  </span>
</button><!-- /button-loader -->

alert disabled

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Disabled",
  "disabled": true,
  "classes": "c-button-loader--alert"
})  }}

Markup







<!-- button-loader --><button disabled="disabled" aria-disabled="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Disabled
  </span>
</button><!-- /button-loader -->

transparent

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Transparent",
  "classes": "c-button-loader--transparent"
})  }}

Markup







<!-- button-loader --><button x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Transparent
  </span>
</button><!-- /button-loader -->

transparent with active state

Simulate triggering the :active CSS pseudo-class

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "name": "active",
  "text": "Active",
  "classes": "c-button-loader--transparent ds-active"
})  }}

Markup







<!-- button-loader --><button name="active" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Active
  </span>
</button><!-- /button-loader -->

transparent with hover state

Simulate triggering the :hover CSS pseudo-class

Show code

Macro

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

Markup







<!-- button-loader --><button name="hover" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Hover
  </span>
</button><!-- /button-loader -->

transparent with focus state

Simulate triggering the :focus CSS pseudo-class

Show code

Macro

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

Markup







<!-- button-loader --><button name="focus" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Focus
  </span>
</button><!-- /button-loader -->

transparent disabled

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Disabled",
  "disabled": true,
  "classes": "c-button-loader--transparent"
})  }}

Markup







<!-- button-loader --><button disabled="disabled" aria-disabled="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Disabled
  </span>
</button><!-- /button-loader -->

small

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Small",
  "classes": "c-button-loader--sm"
})  }}

Markup







<!-- button-loader --><button x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Small
  </span>
</button><!-- /button-loader -->

link

Link button
Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Link button",
  "href": "/"
})  }}

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Link button
  </span>
</a><!-- /button-loader -->

link with target blank

Link button with target
Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Link button with target",
  "href": "http://www.google.com",
  "target": "_blank"
})  }}

Markup







<!-- button-loader --><a href="http://www.google.com" role="button" draggable="false"  target="_blank" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Link button with target
  </span>
</a><!-- /button-loader -->

link disabled

Disabled link button
Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Disabled link button",
  "href": "/",
  "disabled": true
})  }}

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Disabled link button
  </span>
</a><!-- /button-loader -->

button with right icon

Button with icon
Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "html": "Button with icon<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": "/"
})  }}

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Button with icon<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 -->

button with left icon

Button with icon
Show code

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>Button with icon",
  "href": "/"
})  }}

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</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>Button with icon
  </span>
</a><!-- /button-loader -->

button with only icon

Show code

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

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</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 small with only icon

Show code

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

Markup







<!-- button-loader --><a href="/" role="button" draggable="false"  x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</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

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "element": "input",
  "name": "send-form",
  "text": "Submit"
})  }}

Markup







<!-- button-loader --><div name="send-form" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            class="c-button-loader relative"
                            data-module="c-button-loader">
  <span class="c-button-loader__content inline-flex align-baseline">
    <input value="Submit" type="submit" class="bg-transparent font-semibold">
  </span>
    <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
    <!-- spinner -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

</div><!-- /button-loader -->

input disabled

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "element": "input",
  "text": "Submit",
  "disabled": true
})  }}

Markup







<!-- button-loader --><div disabled="disabled" aria-disabled="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 value="Submit" type="submit" class="bg-transparent font-semibold">
  </span>
    <span class="c-button-loader__spinner flex items-center justify-center absolute inset-0">
    <!-- spinner -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

</div><!-- /button-loader -->

prevent double click

Show code

Macro

{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
{{ componentButtonLoader({
  "text": "Submit",
  "preventDoubleClick": true
})  }}

Markup







<!-- button-loader --><button data-prevent-double-click="true" x-data="{ state: '' }"
                            x-init="() => {
                              if (state == 'is-loading'){
                                $refs.spinnerText.querySelector('[role=alert]').innerText = 'Acción en curso';
                              } else if (state == 'is-success'){
                                $refs.successText.innerText = 'Acción realizada con éxito';
                              }
                            }"
                            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 -->
<div class="c-spinner " data-module="c-spinner" x-ref="spinnerText" >
</div>
<!-- /spinner -->
  </span>

    <span class="c-button-loader__success flex items-center justify-center absolute inset-0">
    <p x-ref="successText" class="sr-only" role="alert" aria-live="assertive">
    </p>
    <span aria-hidden="true">✓</span>
  </span>

  <span class="c-button-loader__content inline-flex align-baseline">
    Submit
  </span>
</button><!-- /button-loader -->