@orochibraru/ui

Floating action button above the phone tab bar, with a haptic tap.

Phones only: narrow the window and it floats bottom right, above the tab bar. On desktop the same action is a primary button in the page header.

Usage

Example.svelte

<script lang="ts">
	import PlusIcon from "@lucide/svelte/icons/plus";
	import { toast } from "svelte-sonner";

	import Fab from "@orochibraru/ui/blocks/fab";
</script>

<p class="text-muted-foreground text-sm">
	Phones only: narrow the window and it floats bottom right, above the tab bar.
	On desktop the same action is a primary button in the page header.
</p>
<Fab label="New task" icon={PlusIcon} onclick={() => toast("Fab tapped.")} />