# Delete Button (https://dimah-s3.vercel.app/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://dimah-s3.vercel.app/docs/react/ui) first — stylesheet and toaster. Then
add this component:

<Tabs items="[&#x22;npm package&#x22;, &#x22;shadcn registry&#x22;]">
  <Tab value="npm package">
    ```tsx
    import { DeleteButton } from "@dimah-s3/ui";
    ```
  </Tab>

  <Tab value="shadcn registry">
    <CodeBlockTabs defaultValue="npm">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="npm">
          npm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="pnpm">
          pnpm
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="yarn">
          yarn
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="bun">
          bun
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="npm">
        ```bash
        npx shadcn@latest add @dimah-s3/delete-button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="pnpm">
        ```bash
        pnpm dlx shadcn@latest add @dimah-s3/delete-button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="yarn">
        ```bash
        yarn dlx shadcn@latest add @dimah-s3/delete-button
        ```
      </CodeBlockTab>

      <CodeBlockTab value="bun">
        ```bash
        bun x shadcn@latest add @dimah-s3/delete-button
        ```
      </CodeBlockTab>
    </CodeBlockTabs>
  </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 delete?">
    Completed and failed attachments include a dismiss control that calls `reset()` on the `useDelete` return. You can also call `reset()` yourself.
  </Accordion>

  <Accordion title="How do I customize the confirmation dialog text?">
    Use `title` and `description` props:

    ```tsx
    <DeleteButton
      delete={del}
      objectKey={avatarKey}
      title="Remove profile picture?"
      description="This action cannot be undone. Your profile will revert to the default avatar."
    />
    ```
  </Accordion>

  <Accordion title="How do I perform deletion without the confirmation dialog?">
    Use the headless `useDelete` hook and call `remove(objectKey)` directly:

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

    <button onClick={() => remove(avatarKey)}>Quick Delete</button>;
    ```
  </Accordion>
</Accordions>