A floating action button that fans out into a speed dial of alternative actions anchored to a page corner.
"use client";
import FloatButton from "@/components/ui/float-button";
import * as BysagesCore from "@bysages/core";
import type { ReactNode } from "react";
import "@bysages/tokens/css";
BysagesCore.applyTheme({ mode: "light", accent: "ink", density: "default" });
function glyph(d: string): ReactNode {
return (
<svg
width={16}
height={16}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth={1.75}
strokeLinecap="round"
strokeLinejoin="round"
aria-hidden="true"
>
<path d={d} />
</svg>
);
}
const plus = "M12 5v14m-7-7h14";
const compose = "M12 20h9m-1.5-12.5a2.1 2.1 0 0 0-3-3L4 17v3h3Z";
const share =
"M12 3v12m0-12 4 4m-4-4-4 4m-4 8v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3";
const trash = "M4 7h16m-9-4h2m-6 4 1 13h8l1-13m-7 4v6m4-6v6";
const notes = [
{ title: "Q3 roadmap", updated: "Updated 2h ago" },
{ title: "Onboarding checklist", updated: "Updated yesterday" },
{ title: "Design review notes", updated: "Updated 3 days ago" },
];
export default function FloatButtonDemo() {
return (
<div
className="relative h-screen w-full overflow-hidden p-8"
style={{
background: "var(--bs-color-surface-1, #f6f4ee)",
color: "var(--bs-color-text-primary, #1a1a1a)",
}}
>
<div className="mx-auto max-w-md space-y-3">
{notes.map((note) => (
<div
key={note.title}
className="rounded-lg border p-4"
style={{
borderColor: "var(--bs-color-border, #e5e1d8)",
background: "var(--bs-color-surface-0, #ffffff)",
}}
>
<p
className="text-sm font-medium"
style={{ color: "var(--bs-color-text-primary, #1a1a1a)" }}
>
{note.title}
</p>
<p
className="text-xs"
style={{ color: "var(--bs-color-text-tertiary, #8a8578)" }}
>
{note.updated}
</p>
</div>
))}
</div>
<FloatButton placement="bottom-end">
<FloatButton.Trigger label="Actions">{glyph(plus)}</FloatButton.Trigger>
<FloatButton.Item label="Compose">{glyph(compose)}</FloatButton.Item>
<FloatButton.Item label="Share">{glyph(share)}</FloatButton.Item>
<FloatButton.Item label="Delete">{glyph(trash)}</FloatButton.Item>
</FloatButton>
</div>
);
}