Sling button

A send button on a tether that you pull away to arm and release, with the keyboard path first.

New

Send pad

Pull the pad out of its well to arm the send and release to fire it, or use the keyboard. The pad always comes back.

Press Enter to send, or pull the pad away and release.

Nothing sent yet.

Implementation

1"use client";2 3import {4  useEffect,5  useRef,6  useState,7  type CSSProperties,8  type HTMLAttributes,9  type PointerEvent as ReactPointerEvent,10} from "react";11import { Send } from "lucide-react";12 13export type SlingButtonProps = Omit<14  HTMLAttributes<HTMLDivElement>,15  "children" | "onChange" | "onSelect"16> & {17  /** Accessible name for the button. */18  label?: string;19  /** The visible instruction under the well. */20  caption?: string;21  /** Called when the button is pressed, keyed, or released while armed. */22  onSend?: () => void;23  /** How far the pad may be pulled from the well, in pixels. */24  maxPull?: number;25  /** How far the pad must be pulled before the release fires, in pixels. */26  armAt?: number;27  /** Additional class name for the root. */28  className?: string;