Modus UI

Cinder Trigger

Web (React)

A commit button that burns down an undo window along its edge before it settles.

Cinder Trigger commits an action and then offers a short recall window, drawn as a line burning along the bottom edge. Hover pauses it and Escape recalls. Label type is mono uppercase, colours come from primary tokens.

Modus / Cinder Trigger

Installation

CLI

npx @modus-ui/cli add cinder-trigger

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/cinder-trigger.tsx.
  3. Paste the code.

Usage

tsx
import { CinderTrigger } from "@/components/ui/cinder-trigger";

export default function Example() {
  return <CinderTrigger />;
}

Props

PropTypeDefaultDescription
labelstring"Send proof"Label before committing.
undoLabelstring"Recall"Label while the undo window is open.
doneLabelstring"Sent"Label after the fuse burns out.
iconany-Optional leading icon.
colorstring"hsl(var(--primary-foreground))"Text colour.
backgroundstring"hsl(var(--primary))"Button background colour.
fuseColorstring"hsl(var(--primary-foreground))"Colour of the burning fuse.
sizestring"md"Button size: "sm", "md" or "lg".
radiusnumber8Corner radius in pixels.
undoWindownumber4000Time to undo in milliseconds.
fusestring"bottom"Where the fuse burns: "outline", "top" or "bottom".
fuseThicknessnumber1.5Fuse stroke width in pixels.
crossfadeMsnumber200Label crossfade duration in milliseconds.
commitOnstring"press"Fire onCommit on "press" or when the fuse ends ("fuseEnd").
pauseOnHoverbooleantruePause the fuse while hovered.
settlestring"reset"After finishing, "reset" to idle or "stay" done.
disabledbooleanfalseDisables the button.
onCommitany-Called when the action commits.
onUndoany-Called when the action is undone.
onFuseEndany-Called when the fuse burns out.
onPhaseChangeany-Called with each new phase.
typestring"button"Native button type.

Comments

  • No comments yet.