SlideToConfirm

A drag-to-confirm track for destructive or high-consequence actions — the user drags a spring-loaded thumb past ~85% of the rail to fire onConfirm, then the control latches into a confirmed state. The deliberate motion is the safeguard: it can't be triggered by a stray click.

Import

import { SlideToConfirm } from "@roger-emerson/ploxum-primitives";

Usage

<div className="w-72">
  <SlideToConfirm
    confirmedLabel="Records purged"
    label="Slide to delete records"
    onConfirm={() => purgeRecords()}
    tone="danger"
  />
</div>

Props

Prop	Type	Default	Description
`label`	`string`	`"Slide to confirm"`	Resting prompt rendered in the track. Also the accessible label until confirmed.
`confirmedLabel`	`string`	`"Confirmed"`	Label shown once the action has fired. Becomes the accessible label in the confirmed state.
`onConfirm`	`() => void`	—	Fired once the thumb is dragged past ~85% of the rail, or on Enter/Space.
`tone`	`"danger" \| "primary"`	`"danger"`	Drives the fill, thumb icon, and confirmed-text hue.
`disabled`	`boolean`	`false`	Blocks dragging and keyboard confirmation; dims the control.
`className`	`string`	—	Merged onto the track wrapper.

Design rules

The thumb springs back when released below the ~85% threshold — partial drags never fire. Confirmation is intentional, never accidental.
tone="danger" uses the danger token and a Trash2 glyph; tone="primary" uses amber and a ChevronRight. Reserve danger for irreversible operations.
Drag has no native keyboard equivalent, so the track is role="button" with tabIndex={0} and an Enter/Space handler — keyboard users confirm without the gesture.
The fill bar is decorative (aria-hidden); state for assistive tech reads from the aria-label swap, not the visual fill.

Storybook

Open SlideToConfirm in Storybook ↗