Hold button

TS

import { … } from "@fungi.computer/caps/components/hold-button";

Confirm delete

TSX

import { HoldButton } from "@fungi.computer/caps/components/hold-button";

export default function ConfirmDelete() {
  return (
    <HoldButton
      holdHint="Press and hold to delete the listing."
      onConfirm={() => {
        /* This specimen has no host action. */
      }}
      variant="destructive"
    >
      Hold to delete
    </HoldButton>
  );
}

Interactive

TSX

import { useState } from "react";
import { HoldButton } from "@fungi.computer/caps/components/hold-button";

export default function HoldToClear() {
  const [cleared, setCleared] = useState(false);
  return (
    <HoldButton
      disabled={cleared}
      holdHint="Press and hold to clear the basket."
      holdMs={600}
      onConfirm={() => {
        setCleared(true);
      }}
      variant="outline"
    >
      {cleared ? "Basket cleared" : "Hold to clear basket"}
    </HoldButton>
  );
}

Props

HoldButtonProps

Prop	Type	Description
children	ReactNode
onConfirm()	() => void	Runs once the button has been held for holdMs.
holdMs?	number	How long to hold, in milliseconds: a deliberate pause, not motion.
holdHint?	string	Spoken description of the gesture.

• childrenReactNode
• onConfirm()() => void

  Runs once the button has been held for holdMs.

• holdMs?number

  How long to hold, in milliseconds: a deliberate pause, not motion.

• holdHint?string

  Spoken description of the gesture.

Full types: API reference.