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

Button

Free · MIT

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

← Advanced SelectCalendar →

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/button

Plain-CSS theme — no build step

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

Tailwind theme — needs Tailwind v4

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

Plain-CSS theme, re-pointed onto Lumos tokens

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

Tailwind theme, re-pointed onto Lumos tokens

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

Live demo

Button

Link (renders <a>)Outline link

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
`Button.astro``button``data-variant`: `primary` · `secondary` · `outline` · `ghost`
`data-size`: `sm` · `md` · `lg`
`data-icon`: `true` when set		——

Source

What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.

src/components/ui/forms/button/Button.astro
---
// src/components/ui/forms/button/Button.astro — headless primitive (see ../../README.md).
// Dynamic <a>/<button> per `href`, with `variant` / `size` / `icon` exposed as data attributes.
// `icon` is a build-time boolean, so it is present-when-true (`data-icon="true"`) rather than
// carrying a "false" value — see the attribute conventions in ../README.md.
//
// structure.css makes an icon child non-interactive: without it an <svg> inside the button reports
// itself as event.target and swallows the click. That rule is behavior, not skin — do not delete it.
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

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

const { variant = "primary", size = "md", icon, href, class: className, ...rest } = Astro.props;
const Tag = href ? "a" : "button";
---

<Tag
  href={href}
  class={className}
  data-slot="button"
  data-variant={variant}
  data-size={size}
  data-icon={icon ? "true" : undefined}
  {...rest}
>
  <slot />
</Tag>
src/components/ui/forms/button/index.ts
import Button from "./Button.astro";

export { Button };
export default Button;

What you get

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