FloatButton

    Floating action buttons for quick access to common actions, with group and back-to-top support.

    When to Use

    • To provide quick access to frequently used actions (e.g., help, feedback)
    • As a floating back-to-top button for long pages
    • To group multiple floating actions that expand on click or hover

    Import

    import { FloatButton } from "orizon";

    Examples

    Basic

    A simple floating action button.

    import { MessageCircle } from "lucide-react";

<FloatButton icon={<MessageCircle />} />
<FloatButton type="primary" icon={<MessageCircle />} />

    Shapes

    FloatButton supports circle (default) and square shapes.

    import { Settings } from "lucide-react";

<FloatButton icon={<Settings />} shape="circle" />
<FloatButton icon={<Settings />} shape="square" />

    With Tooltip

    Show a tooltip on hover with the tooltip prop.

    import { MessageCircle } from "lucide-react";

<FloatButton
  icon={<MessageCircle />}
  tooltip="Send feedback"
/>

    With Badge

    Display a notification badge with a count or dot indicator.

    import { Bell } from "lucide-react";

<FloatButton icon={<Bell />} badge={{ count: 5 }} />
<FloatButton icon={<Bell />} badge={{ dot: true }} />

    Group

    Group multiple floating buttons that expand on click or hover.

    import { Plus, MessageCircle, Settings, HelpCircle } from "lucide-react";

<FloatButton.Group trigger="click" icon={<Plus />}>
  <FloatButton icon={<MessageCircle />} tooltip="Chat" />
  <FloatButton icon={<Settings />} tooltip="Settings" />
  <FloatButton icon={<HelpCircle />} tooltip="Help" />
</FloatButton.Group>

    Back to Top

    A specialized button that scrolls to the top of the page when clicked.

    <FloatButton.BackTop />
<FloatButton.BackTop visibilityHeight={200} />
    Note

    FloatButton.BackTop is visibility-based — it only appears after scrolling past the visibilityHeight threshold. It is best demonstrated in a full-page context rather than a preview.

    API

    FloatButtonProps

    • icon — ReactNode — Button icon
    • type — "primary" | "default" — Visual style (default: "default")
    • shape — "circle" | "square" — Button shape (default: "circle")
    • description — ReactNode — Text below the icon
    • tooltip — string — Hover tooltip text
    • badge — { count?: number; dot?: boolean } — Badge indicator
    • href — string — Navigate to URL on click
    • onClick — () => void — Click handler

    FloatButton.Group Props

    • trigger — "click" | "hover" — How the group expands
    • open — boolean — Controlled open state
    • onOpenChange — (open: boolean) => void — Open state callback
    • icon — ReactNode — Icon for the trigger button
    • shape — "circle" | "square" — Shape for all buttons (default: "circle")

    FloatButton.BackTop Props

    • visibilityHeight — number — Scroll distance before showing (default: 400)
    • duration — number — Scroll animation duration in ms (default: 450)
    • Inherits all FloatButtonProps