On this page
Proposed CSC Standards · 0.1.0
Alerts
A persistent message about the current page or form.
Tell the person about a result or a risk that should stay on the page.
What this describes
When to use
- A form-level error summary.
- A success message that should remain until the person leaves.
- A warning the person must read before continuing.
When not to use
- A transient confirmation. Use a toast.
- A field error. Put that on Input.
Allowed variants
Info
Neutral status.
- Hierarchy
- Low urgency.
- Use in
- Page notices.
- Restriction
- Still include a sentence.
- Accessibility
- Text plus optional icon.
- Responsive
- Full width of the column.
Success
A completed action that should remain.
- Hierarchy
- Positive.
- Use in
- After save, when the person stays on the page.
- Restriction
- Do not also fire a toast for the same sentence.
- Accessibility
- The word success or the sentence states the outcome.
- Responsive
- Wraps.
Warning
A risk before the person continues.
- Hierarchy
- Caution.
- Use in
- Irreversible steps.
- Restriction
- Stays on the page.
- Accessibility
- Not color alone.
- Responsive
- Wraps.
Error
A failed action or invalid form.
- Hierarchy
- Highest urgency on the page.
- Use in
- Submit failures.
- Restriction
- Does not auto-dismiss.
- Accessibility
- Focus or an alert role.
- Responsive
- Sits above the fields.
Mandatory rules
Include a text message and a tone that matches it
Info, success, warning, and error each include a sentence. The icon is additional.
Implementation detail
WCAG 1.4.1. An icon or color without the sentence fails.
Include a full sentence. Match the wash to the meaning: blue, green, amber, or red.
Check: The message is readable as text.
Move focus to an error summary on submit
When submit fails, focus the alert that lists the errors.
Implementation detail
WCAG 3.3.1 and 4.1.3. A message inserted below the fold is easy to miss.
Give the alert a ref and focus it, or use role="alert" for a short message. Do not rely on color.
Applies when: The page shows a form-level error after submit.
Check: After a failed submit, focus is on the summary or the summary is announced.
Do not auto-dismiss an error
Error and warning alerts stay until the condition is gone.
Implementation detail
Proposed CSC Standard. A disappearing error leaves no record of what failed.
Keep an error on the page until it is resolved. Use a toast only for a transient success.
Check: The error is still present after five seconds.
Restrictions
Accessibility
- Message is text.
- Errors persist.
- Submit failures are announced or focused.
Responsive behavior
- Alerts are full width of the content column.
- Text wraps. Icons do not sit on their own row unless the width is under 320px.
Component states
Visible
The message stays in the layout.
Focused
After submit failure, focus can move to the summary.
Correct implementation
The error is a sentence on a red wash. Color is not the only cue.
Imports: None. Dependencies: None. Rules: ALT-001, ALT-003.
export function SubmitError() {
return (
<div role="alert" style={{ background: '#FFF0F1', color: '#B82E40', borderRadius: 8, padding: '13px 15px' }}>
<strong>Could not submit</strong>
<p>Check the required fields and try again.</p>
</div>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- Icon-only banners.
- Auto-dismissing an error.
- Duplicating the same message as a toast and an alert.
Testing checklist
Agent prompts for this component are in the AI Development Hub.