Floating continue

Sticky-bottom call-to-action — a pill button wrapped in a frosted-glass container. Drop it at the viewport bottom so the primary next step is always one tap away.

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/floating-continue.json

Usage

Drop the block into a fixed-position wrapper near the viewport bottom.

TSImport

import {
  FloatingContinue,
  FloatingBackContinue,
  FloatingBackClearContinue,
} from "@/components/blocks/floating-continue";

TSExample

import { FloatingContinue } from "@/components/blocks/floating-continue";

export function Footer() {
  return (
    <div className="fixed inset-x-0 bottom-6 z-50 flex justify-center px-4">
      <FloatingContinue
        label="Continue with 1 project"
        onClick={() => console.log("continue")}
      />
    </div>
  );
}

Composition

Three sibling exports, one for each action layout.

FloatingContinue           — single CTA in a frosted shell
FloatingBackContinue       — back + continue
FloatingBackClearContinue  — back + clear (hidden on mobile) + continue

Preview

Mock page content with the block anchored at the bottom of the preview area.

Back + Continue

Two actions in the same floating shell. On mobile the back label collapses to just the arrow to save space.

Back + Clear + Continue

Three-action variant. The middle Clear button is hidden on mobile to keep the shell compact.

Selection popover

Dark popover with a downward caret stacked above the floating bar. Lists the current selection as removable chips with avatars and a Clear all action.

Selected (2)

Event Design

Sermon Design

Variants

Short label, no icon, and in-flow rendering.

API Reference

Props for each of the three floating-continue exports.

FloatingContinue

Prop	Type	Default	Description
`label`	string	—	Button label.
`hideIcon`	boolean	false	Hide the trailing chevron icon.
`onClick`	() => void	—	Click handler.
`disabled`	boolean	false	Disable the action.

FloatingBackContinue

Prop	Type	Default	Description
`backLabel`	string	"Back"	Back button label.
`continueLabel`	string	"Continue"	Continue button label.
`onBack`	() => void	—	Back handler.
`onContinue`	() => void	—	Continue handler.

FloatingBackClearContinue

Prop	Type	Default	Description
`backLabel`	string	"Back"	Back button label.
`clearLabel`	string	"Clear"	Clear button label (hidden on mobile).
`continueLabel`	string	"Continue"	Continue button label.
`onBack`	() => void	—	Back handler.
`onClear`	() => void	—	Clear handler.
`onContinue`	() => void	—	Continue handler.