DR: Visual inconsistency in warning modals: red warning icon paired with a green primary action button. - hackforla/tdm-calculator GitHub Wiki

This is a record in the Decision Records on Solutions Not Implemented.

Issue

Visual inconsistency in warning modals: red warning icon paired with a green primary action button.

Problem Statement

Some warning modals use a red warning icon while featuring a green primary action button. This combination sends mixed signals, as red typically indicates caution or danger while green suggests affirmation. The mismatch could cause user hesitation or confusion about whether the next step is safe or recommended. A proposal was made to define a new modal type specifically for confirmatory or additive actions to resolve this.

Some examples of where these modals appear:

  • Save edits to FAQ and Admin Guide pages
  • Restore project from trash on the My Projects page
Warning modal example with red warning icon and green primary button Image
Warning modal example with red warning icon and red warning button Image

Potential Solution

  • Introduce a new modal type with its own icon and color standards, used in situations where the action is confirmatory or additive.
  • Redesign the modal visual system so that icon and button colors consistently align with the intended user message.
  • Apply this new modal type across the application where needed.

Feasibility Determination

Decision: We will not implement a new modal type at this time due to lack of time and design resources.

Instead, we will rely on two existing categories of warning modals within our design system:

  • Hard warning modal: Uses a red icon and a red primary button, signaling strong caution (e.g., “You should probably turn back”).
  • Soft warning modal: Uses a red (orange-leaning) warning icon at the top but retains a green primary button, signaling “pay attention, but you are still likely to proceed.”

This distinction provides internal consistency and justifies the current color usage. The team acknowledges the recommendation for a new modal type is valid, but for now, the defined “hard” vs. “soft” warning differentiation will remain the standard.

This page is part of the Decision Record section of the wiki

⚠️ **GitHub.com Fallback** ⚠️