Components
Delete Button
Button component to remove S3 objects with built-in confirmation dialog.
DeleteButton removes an object from S3 after displaying a confirmation dialog.
Preview
Install
Complete UI setup first — stylesheet and toaster. Then add this component:
import { DeleteButton } from "@dimah-s3/ui";Usage
"use client";
import { useDelete } from "@dimah-s3/react";
import { DeleteButton } from "@dimah-s3/ui";
export function AvatarDeleter({ avatarKey }: { avatarKey: string }) {
const del = useDelete({
route: "avatar",
onSuccess: (key) => {
console.log("Avatar removed:", key);
},
});
return (
<DeleteButton delete={del} objectKey={avatarKey} variant="destructive" />
);
}Props
import type { DeleteButtonProps } from "@dimah-s3/ui";Frequently asked questions
Completed and failed attachments include a dismiss control that calls reset() on the useDelete return. You can also call reset() yourself.
Use title and description props:
<DeleteButton
delete={del}
objectKey={avatarKey}
title="Remove profile picture?"
description="This action cannot be undone. Your profile will revert to the default avatar."
/>Use the headless useDelete hook and call remove(objectKey) directly:
const { remove } = useDelete({ route: "avatar" });
<button onClick={() => remove(avatarKey)}>Quick Delete</button>;