警告提示
Alert with Actions
A status message that asks for something back.
#alert#actions#buttons
6 个框架中级
Loading…
A static status message in four severities, sitting in the flow.
<!--
Four severities, four icon SHAPES - circle-i, check, triangle, cross. Someone
who can't separate red from green still reads the alert correctly, because the
colour was never doing the work alone.
The role tracks severity, and only the error gets the assertive one:
error -> role="alert" (interrupts; the user must know now)
info | success | warning -> role="status" (polite; waits its turn)
Slapping role="alert" on all four is the most common mistake in this
component. "Saved" does not get to cut a screen-reader user off mid-sentence.
-->
<div class="alert alert--error" role="alert">
<svg class="alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM7.7 7.7a1 1 0 0 1 1.4 0L10 8.6l.9-.9a1 1 0 1 1 1.4 1.4l-.9.9.9.9a1 1 0 0 1-1.4 1.4l-.9-.9-.9.9a1 1 0 0 1-1.4-1.4l.9-.9-.9-.9a1 1 0 0 1 0-1.4Z" />
</svg>
<div class="alert__body">
<p class="alert__title">Payment declined</p>
<p class="alert__text">Your card was declined by the issuer. Try another card.</p>
</div>
</div>
<div class="alert alert--success" role="status">
<svg class="alert__icon" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.7-9.3a1 1 0 0 0-1.4-1.4L9 10.6 7.7 9.3a1 1 0 0 0-1.4 1.4l2 2a1 1 0 0 0 1.4 0l4-4Z" />
</svg>
<div class="alert__body">
<p class="alert__text">Domain verified.</p>
</div>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | - | 卡片的标题文本。 |
children必填 | ReactNode | - | 在组件内部渲染的内容。 |
severity | 'info' | 'success' | 'warning' | 'error' | 'info' | 通知的语气，决定其颜色和图标。 |
className | string | - | 合并到根元素上的额外类名。 |
Let the role follow the severity: only an error earns role="alert", which is assertive and cuts a screen-reader user off mid-sentence. Info, success and a warning they can finish their paragraph before acting on are all role="status". Keep an icon per severity and keep the shapes distinct - colour on its own excludes roughly one man in twelve. If you re-theme, measure: text-{c}-500 on white lands near 2-3:1, while the text-{c}-800 on bg-{c}-50 pairs here run 6.8-8.0:1.