Skip to main content
astrocraft-ui/ components · 101
Shop

Submit Button

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← SliderSwitch →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

Install command
npx astrocraft-ui add forms/submit-button

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add forms/submit-button --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add forms/submit-button --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add forms/submit-button --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add forms/submit-button --theme tailwind --bridge lumos

Live demo

Submitting: error summary, autosize, character count

Submit it empty: the summary appears, takes focus, and links to the first field that failed. Fill it in and the button goes aria-busy exactly once. The bio grows as you type and the counter only speaks up near the limit.

As it should appear on the invoice.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

ComponentSlotsVariantsRuntime stateNative state
`SubmitButton.astro``submit-button``data-variant`: `primary` · `secondary` · `outline` · `ghost`
`data-size`: `sm` · `md` · `lg`		——

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/forms/submit-button/SubmitButton.astro
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & {
  variant?: "primary" | "secondary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
};

const { variant = "primary", size = "md", class: className, ...rest } = Astro.props;
---

<button
  type="submit"
  class={className}
  data-slot="submit-button"
  data-variant={variant}
  data-size={size}
  {...rest}
>
  <slot />
</button>

<script>
  import { onReadyOnce } from "../../_once";

  window.addEventListener("pageshow", (event) => {
    if (!event.persisted) return;
    for (const button of document.querySelectorAll<HTMLButtonElement>(
      '[data-slot="submit-button"]',
    )) {
      button.disabled = false;
      button.removeAttribute("aria-busy");
    }
  });

  function wire(element: HTMLElement) {
    if (!(element instanceof HTMLButtonElement)) return;
    const form = element.form;
    if (!form) return;

    form.addEventListener("submit", (event) => {
      if (element.getAttribute("aria-busy") === "true") {
        event.preventDefault();
        return;
      }
      if (event.defaultPrevented || !form.checkValidity()) return;
      element.setAttribute("aria-busy", "true");
      setTimeout(() => {
        element.disabled = true;
      }, 0);
    });
  }

  onReadyOnce('[data-slot="submit-button"]', wire);
</script>
src/components/ui/forms/submit-button/index.ts
import SubmitButton from "./SubmitButton.astro";

export { SubmitButton };
export default SubmitButton;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/submit-button — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.