kt-button

The Kanto action button. Ten variants, three sizes, an optional Lucide icon.

Choosing a variant

Icon-only

An icon with no slotted text collapses the button to a square. It then has no accessible name of its own, so label is required:

Running an action

run() takes an async action and shows how it went: busy while it runs — clicks ignored, the focus kept — then a tick, or a shake and an alert if it throws. Two seconds later the button is back at rest. done-label and failed-label replace the label meanwhile, and are announced.

It resolves with what the action resolved with and rejects with what it threw, so the caller still handles the error. A second call while one runs gets the same promise. A send plane turns into the spinner itself while it waits — its outline drawn round into a turning arc — and back into the plane, which flies off to the top right; other icons give way to a spinner, and fade. Under reduced motion only the label and icon change.

Forms

A button inside a shadow root is invisible to the enclosing form, so type="submit" would normally do nothing. <kt-button> bridges that: it runs the form's constraint validation, fires a real submit event, and carries name / value into the submission.

API

Emits no custom events — listen for click as on any button.