INP Button
Interactive button that simulates a blocking task to demonstrate Interaction to Next Paint. Click it; the rAF-yielded measurement path surfaces the input delay.
Preview
Latest interaction—Click to feel a 200ms blocking task.
Customize
INP
200ms
Props
| Prop | Type | Default | Description |
|---|---|---|---|
taskMs | number | 200 | How long the simulated task blocks the main thread. 0 triggers measurement only. |
label | string | "Run task" | Button label. |
goodThresholdMs | number | 200 | Lower threshold for the verdict. |
poorThresholdMs | number | 500 | Upper threshold for the verdict. |
hideReadout | boolean | false | Hide the inline ms readout. |
onInteraction | (ms: number) => void | — | Fires with the measured INP. |
Accessibility
Native <button> with aria-live="polite" readout. Respects reduced motion.