确认对话框 · AlertDialog

在重要操作前请求明确确认；示例使用演示数据。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

• 确认对话框 · 交互示例 1：首先体验这个示例，再查看代码理解组件的组合方式。
• 确认对话框 · 交互示例 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Alert Dialog

AlertDialog asks the user to confirm a destructive or irreversible action before it happens. Use it for things like deleting content, revoking access, or discarding unsaved changes.

It implements the WAI-ARIA APG Alert Dialog pattern: role="alertdialog", a title linked by aria-labelledby, a consequence description linked by aria-describedby, focus moved into the dialog on open and returned to the trigger on close, and no dismissal by clicking outside. Escape cancels.

AlertDialog passes its requested width through to Dialog, which clamps the surface to the container and dynamic viewport with token gutters. Generic Dialog footers should wrap, but Dialog does not own action semantics or order; consumer composition controls that. AlertDialog owns its confirmation semantics: above 640px, actions render horizontally and may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width. Button labels retain their standard single-line behavior. The breakpoint follows available width, not pointer or hover capability. The body scrolls when block space is constrained.

For cases where you want to show an alert without managing open state, use the useImperativeAlertDialog hook: call alert.show(options) and render alert.element in your tree.

使用建议

• Make the action button label specific: "Delete project" is better than "OK" or "Confirm".
• Describe what will happen in the description so the user knows the consequences before confirming.
• Keep the cancel button as the least-destructive focus target. On narrow screens the destructive action is visually and structurally above Cancel, but Cancel still receives initial focus.
• Use concise, specific action labels. Above 640px, complete buttons may move onto another row; at 640px and below, the destructive action appears above Cancel and both buttons fill the footer width.
• 避免：Use AlertDialog for non-destructive actions; use a standard Dialog instead.
• 避免：Rely on color alone to signal danger; the action label itself should say what will happen.
• 避免：Close the dialog from onAction before the work finishes; hold it open with isActionLoading and call onOpenChange(false) when the action settles.

主题 API

{
  "targets": [
    {
      "className": "astryx-alert-dialog"
    }
  ]
}

useImperativeAlertDialog

组件结构

• Title: The question being asked. Renders as a level-2 heading and labels the dialog via aria-labelledby.
• Description: What will happen if the user confirms. Linked to the dialog via aria-describedby.
• Cancel button: Ghost button that dismisses without acting. Takes initial focus, and Escape does the same thing.
• Action button: The confirming action. Destructive by default; shows a spinner while isActionLoading is set.
• Backdrop: Overlay behind the dialog that blocks page interaction. Clicking it does not dismiss.
• Dialog surface: The modal panel that holds the title, description, and buttons.

useImperativeAlertDialog

Hook for showing an alert dialog without managing open state. Call alert.show(options) to open and alert.hide() to close. Render alert.element in your JSX tree.