警告

Alert 用于引起用户注意，并在不中断其工作流程的情况下向他们提供有用信息。

§何时使用

它旨在向用户更新系统当前状态、报告错误和警告，并为用户提供纠正这些错误的说明、链接或命令，以便尽快解决。

§类型

根据情况，用户可能会看到以下一种 Alert 类型：

• Danger（危险）用于通知用户当前无法继续执行底层操作（例如，无法访问某个对象），或者进一步的用户操作可能导致数据或资源的永久丢失。
• Warning（警告）用于告知用户后续操作可能会遇到困难，或者备用方案可能不可用。
• Success（成功）用于通知用户系统状态良好或发生了其他积极变化。例如，成功完成了一项耗时操作。
• Info（信息）用于显示有关如何组织系统工作的建议（应明确显示），或宣布额外的系统功能。
• Normal（普通）主要用于突出显示文本，例如简短的帮助信息、示例代码、计算结果等。

请勿仅仅为了引起用户注意而替换类型，例如使用 Warning 或 Error 类型的 Alert 来显示参考信息。

除了说明之外，Alert 还提供了一些命令，以帮助用户找到解决方案并采取行动。

§何时不要使用

由于 Alert 的干扰性（尤其是选择了错误的 Alert 类型时），应谨慎使用。

• 我们不建议使用 Alert 来显示与单独的表单或对话框字段相关的错误、警告或帮助消息。在这种情况下，最好在字段组件上使用 Error 状态，或在字段旁边显示纯文本消息或带有图标的文本。
• 我们不建议在同一页面（表单、对话框）上放置多个 Alert，例如 Danger 和 Warning，因为这会难以确定消息的优先级。
• 请勿将 Alert 用于其预期目的之外的任何用途，例如视觉上突出页面上的任何块：标题、表单字段等。
• 请勿使用 Alert 来确认操作已完成。对于此类任务，请使用 Dialog。
• 请勿使用 Alert 来显示用户发起的操作的状态。为此目的，请使用 Toaster。

§内容

必需的 Alert 元素包括描述和图标。此外，Alert 可能还包含标题（Title）、关闭按钮（Close）以及最多三个带有操作的附加按钮（Actions）。

§图标

默认情况下，Alert 会显示与其类型相对应的图标。但是，您可以在不更改背景颜色的情况下为组件选择自己的图标。对于 Alert 类型 Normal，图标是可选的，默认不显示。

§文本

标题和描述文本应尽可能简短，并以大写字母开头。如果您想向用户提供更多信息，最好使用链接或“帮助”、“文档”和“了解更多”按钮将用户引导至单独的帮助页面或网站。

标题应清晰地传达消息的主旨。但是，它不应重复描述。如果难以选择主旨并将其转化为标题，请使用不带标题的描述。

标题不应以句号结尾。

§按钮

根据设计要求和限制，可以在文本的右侧（Horizontal Layout）或下方（Vertical Layout）显示附加按钮。

如果按钮及其标签为描述和标题留有足够的空间，而不会产生不必要的换行，则将按钮放在右侧。如果 Alert 的宽度小于 500-600px，则选择垂直视图。

附加按钮默认使用 Normal 样式。但是，根据消息的语义，它们可以是 Action、Contrast-normal 以及各种 Outline 类型（Outline-info、Outline-danger 等）。我们建议保持所有三个按钮的样式一致。只使用一个 Action 按钮，并务必考虑页面的上下文，例如页面上是否已存在其他 Action 按钮。

Alert 有一个关闭按钮，当用户希望隐藏消息（因为其不相关）时应显示该按钮。

§选项

Alert 的宽度没有限制：它可以占据页面（表单或对话框）上的所有可用空间，或者具有由主内容宽度决定的固定宽度。

如果 Alert 设计用于显示在页面边框（表单、对话框）附近并占据整个宽度（例如，关于更新浏览器或网站 Cookie 存储条件的通知），则无需对 Alert 容器的圆角进行处理。

如果设计不需要 Alert 主动吸引用户注意，您可以使用 Outlined View，它与 Filled View 具有相同的语义类型。