BUTTON
危险操作按钮Destructive Button
红色实心表示会删掉东西，左边一枚同样大小的取消，避免手滑就生效。
效果预览
适合用在哪
删除项目、清空数据、退出登录、不可撤销的提交。
容易踩的坑
- 单击就删除，没有确认，误触无法挽回。
- 红色按钮比页面主 CTA 更大更亮，用户分不清哪个才是推荐操作。
- 用浅红字配白底冒充危险按钮，对比度不够，也不像按得下去。
设计提示词 · Prompt
危险操作按钮（Destructive Button）：删除、清空、退出登录用红色实心（#dc2626 一带）+ 白字，高度、圆角与主按钮一致，对比度至少 4.5:1。旁边放一枚同等大小的取消（Ghost 或描边）：取消在左、危险在右。危险按钮不要比页面主 CTA 更大。点击后先确认（对话框，或按钮文案先变成「确认删除」再执行），不要单击即毁。禁用态降到 45% 透明度并加 not-allowed，不要用浅红字在白底上冒充危险按钮。
Destructive Button: delete, clear, and log-out use a solid red (around #dc2626) with white text, the same height and radius as the primary button, and at least 4.5:1 contrast. Place an equal-size cancel (ghost or outlined) beside it: cancel on the left, destructive on the right. Don't make the destructive button larger than the page's primary CTA. Confirm before acting (a dialog, or a first click that changes the label to "Confirm delete"). The disabled state drops to 45% opacity with a not-allowed cursor — don't fake a destructive button with pale red text on white.
常见搭配
同一页面里经常和「危险操作按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-dangerrow"> <button class="d-btn d-btn--ghost" type="button">取消</button> <button class="d-dangerbtn" type="button">删除项目</button> </div>