CSC Design System Skills & Best Practices
Ctrl K
CS
On this page

Proposed CSC Standards · 0.1.0

Toast notifications

A short confirmation that can leave the screen.

Confirm a completed, low-risk action without blocking the page.

Live componentResponsive playground

What this describes

Default
Success
Info
Error

When to use

  • A save succeeded and the page already shows the new state.
  • A background task finished.

When not to use

  • An error the person must fix. Use Alert.
  • A decision. Use Modal.

Allowed variants

Success

A completed save.

Hierarchy
Transient.
Use in
After a successful command.
Restriction
Do not move focus.
Accessibility
Live region.
Responsive
Sits inside the viewport, not off the right edge.

Info

A neutral update.

Hierarchy
Transient.
Use in
Background notices.
Restriction
Not for errors.
Accessibility
Live region.
Responsive
Same placement.

Error

A duplicate notice only.

Hierarchy
Transient.
Use in
Alongside a persistent alert.
Restriction
Never the only error.
Accessibility
Assertive only if the page also shows the error.
Responsive
Same placement.

Mandatory rules

TST-001RequiredARIA

Announce the toast without moving keyboard focus

A polite or assertive live region carries the message. Focus stays where the person was.

Implementation detail

Moving focus to a corner toast breaks the task. A live region announces it.

Announce the message in a live region. Do not move focus to the toast.

Check: After the action, focus remains on the control that started it, and the message is announced.

Source

TST-002ProhibitedProposed CSC convention

Do not put the only copy of an error in a toast

Errors persist on the page.

Implementation detail

Proposed CSC Standard. A toast disappears.

tone="error" on a toast is only a duplicate of an Alert that remains.

Check: Dismissing the toast still leaves the error on the page.

TST-003RecommendedProposed CSC convention

Keep the message short and specific

The toast says what happened, such as “Changes saved”.

Implementation detail

Proposed CSC Standard. A paragraph in a toast is clipped.

One sentence. Put detail in an alert or the page.

Check: The message fits on two lines at 320px.

Restrictions

  • TST-002 Do not put the only copy of an error in a toast. Errors persist on the page.

Accessibility

  • Status message via a live region.
  • Focus does not move.
  • Errors also exist as persistent text.

Responsive behavior

  • The toast stays within the viewport padding at 320px.
  • It does not cover the focused control.

Component states

Shown

Visible and announced.

Dismissed

Removed without a focus jump.

Correct implementation

Success toastCorrect implementation · TSX

A short green status announces success and does not take keyboard focus.

Imports: None. Dependencies: None. Rules: TST-001, TST-003.

export function SavedNotice() {
  return <div role="status" style={{ background: '#16845C', color: '#fff', borderRadius: 8, padding: '10px 14px' }}>Changes saved</div>;
}

Incorrect implementation

No incorrect example is published for this component.

Common mistakes

  • Focusing the toast.
  • Error-only toasts.
  • Covering the submit button on a phone.

Testing checklist

Agent prompts for this component are in the AI Development Hub.