Undo Pill

An inline undo pill with a draining countdown ring that pauses on hover.

@spectrumui/undo-pill

Ana Wells

The homepage mock is ready for review

Dev Patel

Standup moved to 10:30 tomorrow

Mia Chen

Shipping notes for the 2.4 release

Installation

Usage

import { UndoPill } from "@/components/spectrumui/undo-pill"

<UndoPill
  open={open}
  label="Message deleted"
  onUndo={() => restore()}
  onExpire={() => commit()}
/>

API Reference

UndoPill

Renders a fully controlled pill with role="status" so it is announced politely to screen readers. Show it by setting open to true, then flip it back to false from onUndo and onExpire. Position it from outside via className or a wrapper element.

Prop	Type	Default	Description
*`open`	`boolean`	-	Controls whether the pill is shown. Fully controlled
`label`	`string`	`"Deleted"`	Message shown inside the pill
`duration`	`number`	`5`	Countdown length in seconds
*`onUndo`	`() => void`	-	Fires when the Undo button is clicked or Escape is pressed while focus is within the pill
*`onExpire`	`() => void`	-	Fires once when the countdown completes
`pauseOnHover`	`boolean`	`true`	Pause the countdown while the pill is hovered or focused; it resumes on leave
`undoLabel`	`string`	`"Undo"`	Text of the undo button
`className`	`string`	-	Additional classes merged with the default pill styles

Examples

Longer duration with pause on hover

8 second countdown — hover the pill to pause the countdown