R
交互控件DeleteButton就地确认无弹窗Motion

删除按钮

在原地二次确认的删除按钮，不需要弹窗，也不会打断用户的心流。

等待操作…

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/delete-button.tsx。

npx shadcn@latest add swamimalode07/rare-ui/delete-button

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

delete-button.tsx
import { DeleteButton } from "@/components/ui/delete-button"


export function Demo() {
  return (
    <DeleteButton
      onConfirm={() => console.log("已删除")}
      onCancel={() => console.log("已取消")}
    />
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
onConfirm() => void—确认删除回调。
onCancel() => void—取消回调。
classNamestring—额外的外层样式。