Skip to content
Rechaj Design

inline alert

Inline Alert

Section titled “Inline Alert”

A tinted in-screen block — warning or danger — that flags a blocker on the current screen and offers actions to resolve it. Distinct from a bottom sheet (full attention) and a status card (passive monitor): this is the screen telling you why it’s stuck and what to do about it.

When to use

Section titled “When to use”
  • A scanned entity has an unexpected state (station mismatch, duplicate ID, payment due, expired permit)
  • The user can resolve it without leaving the screen — they have ~2-3 paths to take
  • The error is recoverable; this isn’t a “this whole flow is dead” screen

Use a [[bottom-sheet]] instead when the resolution itself needs significant input (form, picker, multi-field). Use a [[status-card]] for purely passive state monitoring (no actions).

Anatomy

Section titled “Anatomy”
┌──────────────────────────────────────┐
│ ⚠  Station mismatch                  │   ← warn variant (amber tint)
│                                      │
│    Registered to Asbestos.           │
│                                      │
│    [ Request authorization ]         │
│    [ Park ]  [ Cancel ]              │
└──────────────────────────────────────┘
  • Surface: var(--amber2) (warn) or var(--red2) (danger). NO border — tinted background carries the meaning.
  • Radius: 14px (--r-xl half-step).
  • Padding: 14px.
  • Icon circle: 24px, var(--amber10) (warn) or var(--red9) (danger) background, white 14px icon. Circular per global rule.
  • Title: 13.5px / 600 (semibold — NOT 700), color matches family step 11 (--amber11 warn, --red9 danger).
  • Description: 13px / 400 same color family, padding-left: 34px so it indents past the icon.
  • Actions: padding-left: 34px, display: flex, gap: 8px, flex-wrap: wrap. First button is primary (filled dark --grey12), subsequent are outline (--grey12 text, 1px solid --grey5 border — note: this is an interactive control, not a card, so the border is allowed).

Variants

Section titled “Variants”
Variant Bg Title color Icon bg Use
warn (default) --amber2 --amber11 --amber10 Recoverable mismatch, awaiting external action
danger --red2 --red9 --red9 Hard conflict (duplicate ID, integrity failure)

Behavior

Section titled “Behavior”
  • Hidden by default if scenario doesn’t trigger it. Shown via JS: el.style.display = ''.
  • Once a resolution action fires (e.g. “Request authorization”), hide the alert and show a [[status-card]] in its place. Don’t keep both visible.
  • Enter animation: from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); }, 0.4s ease 0.2s both.

Forbidden

Section titled “Forbidden”
  • Using this for success states. Success is a [[bottom-sheet]] modal or a status card with .approved.
  • Stacking multiple alerts on one screen — pick the most blocking one. If you genuinely have two simultaneous issues, the flow is wrong.
  • Centered alerts overlaid on the screen — those are forbidden by DESIGN.md §0. This pattern is inline by definition.
  • Bordered alerts (border: 1px solid var(--amber-line)) — use background tint only.

Reference implementation

Section titled “Reference implementation”

See .inline-alert (and .inline-alert.danger) in products/rechaj-swap-app/prototypes/support-cases-v2.html.