Type the resource name to unlock the delete button. Each matched character lights up in the name, a wrong key shakes the field and the lock icon springs open on a full match.
Delete repository
npx shadcn@latest add https://hyperblur.dev/r/button-type-confirm.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-type-confirm.tsx.
import { ButtonTypeConfirm } from "@/components/hyperblur/button-type-confirm"
<ButtonTypeConfirm confirmText="acme/billing-api" onConfirm={deleteRepo} />| Prop | Type | Default | Description |
|---|---|---|---|
| confirmText | string | "acme/billing-api" | Exact text the user must type. |
| label | string | "Delete" | Submit button label. |
| doneLabel | string | "Repository deleted" | Message shown after submitting. |
| hint | string | "This permanently deletes the repository, its issues and 214 releases. Type" | Sentence placed before the highlighted confirm text. |
| caseSensitive | boolean | true | Whether letter case must match. |
| onConfirm | () => void | undefined | Called when the form is submitted with a full match. |
| onValueChange | (value: string, matched: boolean) => void | undefined | Called on every keystroke. |
| accent | string | "#ef4444" | Danger color used for fills, glows and the focus ring. |
| resetAfter | number | 3200 | 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. |