# Delete Button (https://v1.s3.dimah.dev/docs/react/ui/components/delete-button)

`DeleteButton` removes an object from S3 after displaying a confirmation dialog.

## Preview [#preview]

<DemoPreview name="delete-button-demo.tsx">
  <DeleteButtonDemo />
</DemoPreview>

## Install [#install]

Complete [UI Setup](https://v1.s3.dimah.dev/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items={["npm package", "shadcn registry"]}>

<Tab value="npm package">

```tsx
import { DeleteButton } from "@dimah-s3/ui";
```

</Tab>

<Tab value="shadcn registry">

```npm
npx shadcn@latest add @dimah-s3/delete-button
```

</Tab>

</Tabs>

---

## Usage [#usage]

```tsx
"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 [#props]

```ts
import type { DeleteButtonProps } from "@dimah-s3/ui";
```

<AutoTypeTable
  path="packages/ui/src/components/dimah-s3/delete/delete-button.tsx"
  name="DeleteButtonProps"
/>

## Frequently asked questions [#frequently-asked-questions]

<Accordions>

<Accordion title="How do I dismiss the status row after deletion?">

Use the dismiss control on a completed or failed attachment, or call `reset()`
on the `useDelete` return yourself.

</Accordion>

<Accordion title="How do I customize the confirmation dialog text?">

Use `confirmTitle` and `confirmDescription`:

```tsx
<DeleteButton
  delete={del}
  objectKey={avatarKey}
  confirmTitle="Remove profile picture?" // [!code ++]
  confirmDescription="This action cannot be undone. Your profile will revert to the default avatar." // [!code ++]
/>
```

</Accordion>

<Accordion title="How do I delete without the confirmation dialog?">

Use the headless `useDelete` hook and call `remove(objectKey)` directly:

```tsx
const { remove } = useDelete({ route: "avatar" });

<button type="button" onClick={() => void remove(avatarKey)}>
  Quick Delete
</button>;
```

</Accordion>

</Accordions>