Floating Action Button
pura-fab is a circular, elevated button (strong shadow, primary color) anchored to a corner of the screen, with an icon slot and an extended variant that reveals a text label. Use it for the main action of a screen (create, add, compose). It also exposes an agent-native layer: data-pura-fab-* attributes mirror the live state, and each instance registers itself in window.__puraFabs by its data-pura-id, letting agents enumerate, read the state, and trigger the button via .click() without crossing the Shadow DOM.
Preview
<pura-fab id="fab" extended position="bottom-right" label="New item">
<span slot="icon">
<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
</span>
New
</pura-fab>
<script type="module">
import "/pura/lib/fab.js";
document.getElementById("fab").addEventListener("pura-fab-click", (e) => {
alert("FAB triggered: " + e.detail.id);
});
</script>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
position | string | bottom-right | Corner where the button is pinned: bottom-right, bottom-left, top-right, or top-left. |
extended | boolean | false | Shows the text label next to the icon (pill shape instead of a circle). |
label | string | Action | Accessible name for the icon-only button. Ignored when extended and the label slot has text. |
disabled | boolean | false | Makes the button non-interactive. |
hidden | boolean | false | Standard HTML; removes the host from layout. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/fab.js"></script>import "./pura/lib/fab.js";