Floating Action

The Floating Action component provides a fixed action bar at the bottom of the screen. It supports:

• Customizable message & actions
• Smooth slide-up animation
• Fully flexible slot-based content

This component is useful for notifications, confirmations, or quick actions at the bottom of the page.

Basic Usage

The Floating Action component provides a predefined structure with two main slots:

• message slot – Used to display a message, warning, or notification on the left side.
• actions slot – Used to place action buttons (e.g., confirm, cancel) on the right side.

This makes it easy to quickly implement a floating action bar with minimal customization.

<template>
  <spr-button size="large" tone="success" @click="showFloatingAction = true">Show Floating Action</spr-button>

  <spr-floating-action :show="showFloatingAction">
    <template #message>
      <div class="spr-flex spr-items-center spr-gap-1">
        <Icon class="spr-size-5 spr-text-mango-500" icon="ph:warning-fill" />
        <span>You have unsaved changes</span>
      </div>
    </template>
    <template #actions>
      <spr-button size="large" variant="secondary" @click="showFloatingAction = false">Discard</spr-button>
      <spr-button size="large" tone="success">Save Changes</spr-button>
    </template>
  </spr-floating-action>
</template>

Customizing

The Floating Action component supports full customization using the default slot. Instead of using predefined message and actions slots, you can place any custom content inside the component. This allows you to modify the layout, structure, spacing, and styling as needed.

<template>
  <spr-button size="large" tone="success" @click="showCustomFloatingAction = true"
    >Show Custom Floating Action</spr-button
  >

  <spr-floating-action :show="showCustomFloatingAction" class="spr-rounded-sm">
    <div class="spr-flex spr-w-full spr-items-center spr-justify-between spr-p-6">
      <div class="spr-body-md-regular">Custom Content</div>
      <div>
        <spr-button size="large" variant="secondary" @click="showCustomFloatingAction = false">Cancel</spr-button>
      </div>
    </div>
  </spr-floating-action>
</template>

Props

Prop	Type	Default	Description
show	boolean	false	Controls visibility of the floating action component.

Slots

Slot	Description
message	Content on the left side of the floating action.
actions	Buttons or actions on the right side.
_default_	Allows full customization of the floating action content, replacing the default layout.