LoadingButton

A button that can be used to trigger asynchronus actions. The component manages the loading state of the button, and provides options for error handling.

<script>
import { LoadingButton } from '@thetinkerinc/colibri';

import style from './style.js';

let beer;

async function handleClick() {
	const resp = await fetch(
		'https://random-data-api.com/api/v2/beers'
	);
	const json = await resp.json();
	beer = json;
}
</script>

<LoadingButton {style} action={handleClick}>Recommend a drink</LoadingButton>
{#if beer}
	<div>
		You should try
		{beer.brand}
		{beer.name}
	</div>
{/if}

Props

action:

async function

type:

primary

secondary

disabled:

rounded:

silent:

style:

Object

Slots

default:

confirm:

Events

on:error

on:disabledClick

Styling

This component doesn't have any custom variables

//style.js
export default style = {};