Fab

Floating action button — konsta's kFab in ryder colours, fixed to the bottom-right of the viewport and hidden at lg and up (the desktop shell has its own chrome).

<script setup lang="ts">
import RyderFab from "@opeolluwa/ryder/components/navigation/Fab.vue"
</script>

<template>
  <RyderFab icon="heroicons:plus" @click="create" />
</template>

Examples

<script setup lang="ts">
import { ref } from "vue";
import Fab from "../../../src/components/navigation/Fab.vue";

const clicks = ref(0);
const useSlot = ref(false);
</script>

<template>
  <div class="space-y-2">
    <div class="flex flex-wrap items-center gap-3">
      <span class="text-sm text-gray-500 dark:text-white/50">
        Clicks: {{ clicks }}
      </span>

      <button
        type="button"
        class="text-sm font-medium text-primary-600 underline"
        @click="useSlot = !useSlot"
      >
        {{ useSlot ? "Use icon prop" : "Use default slot" }}
      </button>
    </div>

    <p class="text-xs text-gray-400 dark:text-white/30">
      Fixed to the bottom-right of the viewport and hidden at 1024px and up —
      narrow the window to see it.
    </p>

    <Fab v-if="!useSlot" @click="clicks += 1" />
    <Fab v-else @click="clicks += 1">
      <span class="text-lg leading-none">★</span>
    </Fab>
  </div>
</template>

Props

Prop	Type	Default	Description
icon	string | undefined	"heroicons:plus"	Icon rendered inside the button (ignored when the default slot is used).

Emits

Event	Payload	When
click	event: MouseEvent	The button was tapped.

Slots

Slot	Props	Content
default	—	Replaces the icon entirely.

Notes

• Position/visibility: fixed bottom-6 right-7 z-10 lg:hidden — viewport-level, so it floats over whatever you are viewing until you resize past 1024px.
• Konsta dependency (kFab); the konsta theme CSS must be loaded.
• aria-label="Add" is hardcoded in the component, so screen readers always announce "Add" regardless of the icon.