Floating Action Button
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
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
npx astrocraft-ui add overlays/floating-action-buttonPlain-CSS theme — no build step
npx astrocraft-ui add overlays/floating-action-button --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add overlays/floating-action-button --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/floating-action-button --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add overlays/floating-action-button --theme tailwind --bridge lumosLive demo
FloatingActionButton
Pinned bottom-right of the window. It ships no script: popovertarget opens the menu, and whichever controller already drives that panel places it and syncsaria-expanded.
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.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `FloatingActionButton.astro` | `floating-action-button` | `data-position`: `bottom-right` · `bottom-left` · `top-right` · `top-left` `data-size`: `sm` · `md` · `lg` | — | `[aria-expanded]` |
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.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"button"> & {
for: string;
label: string;
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
size?: "sm" | "md" | "lg";
};
const {
for: target,
label,
position = "bottom-right",
size = "lg",
class: className,
...rest
} = Astro.props;
---
<button
type="button"
popovertarget={target}
aria-label={label}
aria-haspopup="menu"
aria-expanded="false"
data-slot="floating-action-button"
data-position={position}
data-size={size}
class={className}
{...rest}
>
<slot />
</button>
import FloatingActionButton from "./FloatingActionButton.astro";
export { FloatingActionButton };
export default FloatingActionButton;
What you get
The component source, copied into your project by npx astrocraft-ui add overlays/floating-action-button — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.