A paired control where the hovered side stretches and the other shrinks to its icon. Archive drops a page into a box, Discard crushes its cross into a checkmark and takes the full width.
Hi Elena, attached is the revised scope with the analytics add-on and the new delivery dates for Q1.
npx shadcn@latest add https://hyperblur.dev/r/button-archive-discard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-archive-discard.tsx.
import { ButtonArchiveDiscard } from "@/components/hyperblur/button-archive-discard"
<ButtonArchiveDiscard onArchive={archive} onDiscard={discard} />| Prop | Type | Default | Description |
|---|---|---|---|
| archiveLabel | string | "Archive" | Label of the archive side. |
| discardLabel | string | "Discard" | Label of the discard side. |
| archivedLabel | string | "Archived to Done" | Label after archiving. |
| discardedLabel | string | "Draft discarded" | Label after discarding. |
| archiveAccent | string | "#a1a1a1" | Tint of the archive side. |
| onArchive | () => void | undefined | Called when Archive is chosen. |
| onDiscard | () => void | undefined | Called when Discard is chosen. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 2400 | Milliseconds before the finished state returns to the start. Use 0 to keep the finished state. |
| disabled | boolean | false | Blocks every interaction and dims the control. |