Submit Button

Use it on your site

import { useRive } from '@rive-app/react-canvas';

export function SubmitButton() {
  const { rive, RiveComponent } = useRive({
    src: '/form-submit.riv',
    artboard: 'Submit Button',
    stateMachines: 'State Machine 1',
    autoplay: true,
    autoBind: true,
  });

  // every input on this page is a view model property
  const vm = rive?.viewModelInstance;
  if (vm) vm.color('buttonColor').value = 0xFF7B61FF;

  return <RiveComponent style={{ width: '100%', height: 400 }} />;
}

Inputs: label, doneLabel, fontSize, steps, done, sent, icon, sparkles, disabled, buttonColor, labelColor, successColor, disabledColor. All on the SubmitButton view model.

How it's built

From the Form Set: bind done to how many fields are complete and steps to how many there are. The button fills from the left, wakes up when it is full, and a tap sets sent. Pick one of four icons (each leaves its own way), the label, the done label and the colours. It stretches to any width.

1. 1
   Fills from your datadone and steps are two numbers on the view model. One data converter turns done / steps into how far the fill reaches and eases it there. No script.
2. 2
   Ready when fullWhen done reaches steps the button bounces, glows, and the icon turns white and bobs. The transition compares the two numbers directly.
3. 3
   Tap to sendA tap on the full button sets sent to true: a squash, the icon leaves its own way, the label swaps to doneLabel and sparkles pop. Set sent back to false to reset it.
4. 4
   Icons and coloursicon is a list: Send, Next, Download or Save, each with its own exit. The pale track and the icon shading follow buttonColor, and disabled swaps to disabledColor and ignores taps.