TODO

Loading button

The loading button is a button that displays a loading spinner when the loading prop is set to true. It can be used as a button or an anchor. Under the hood, it uses the Button component.

When the loading prop is set to true, the button will have a disabled state and will not respond to clicks. The loading spinner will be displayed instead.

Preview

Extends base props from: HTMLButtonAttributes | HTMLAnchorAttributes

Name Type Default

variant The variant of the button

ButtonVariant

'default'

color The color of the button

ButtonColor

'primary'

href The URL to navigate to when the button is clicked. It will use an anchor as an element for the component

string

Type Value(s)

ButtonVariant 'condensed' | 'default' | 'expanded'

ButtonColor 'primary' | 'secondary' | 'muted' | 'destructive'

Usage

You can refer to the Button component for more information on how to use the button component.

  
        <script lang="ts">
  import { LoadingButton } from '@mikededo/aero-ui';
 
  let loading = $state(false);
 
  const handleOnLoad = () => {
    loading = true;
    // Asynchronously action
    loading = false;
  };
</script>
 
<div class="flex items-center gap-2">
  <LoadingButton {loading} on:click={handleOnLoad}>Loading button</LoadingButton>
</div>

Input