{
  "title": "Inline message",
  "path": "/components/inline-message",
  "url": "https://design.werklist.com/components/inline-message",
  "text": "https://design.werklist.com/agent/components/inline-message",
  "summary": "A message at the top of a page, list or dialog about something that is true there now, with the action that fixes it.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Inline message",
  "purpose": "States a lasting condition of one surface at the top of that surface, with the one action that resolves it.",
  "use": [
    "The connection is down (neutral)",
    "An inbox needs reconnecting (error)",
    "Part of a list did not load, such as some candidates (warning)",
    "A job or a board is read only for this reader (neutral)",
    "A form did not submit (error, at the top of the form)",
    "A problem inside an open dialog, such as a work permit that ends before the start date of an offer (box, at the top of the dialog)"
  ],
  "avoid": [
    "The result of the reader's own action: Toast",
    "A single field value: the field error of Field",
    "A decision before anything happens: Dialog",
    "Something that happened elsewhere: Notifications"
  ],
  "anatomy": [
    {
      "part": "band",
      "measure": "flush with its column, no corners, no line under it; 36 px high, 44 px on coarse pointers; side padding 12 px, 16 px on phones and coarse pointers",
      "token": "--space-3, --space-4"
    },
    {
      "part": "box",
      "measure": "corner radius 8 px; padding 8 px by 12 px",
      "token": "--radius-lg, --space-2, --space-3"
    },
    {
      "part": "sentence",
      "measure": "regular weight on a line of 1.375; wraps and is never cut off"
    },
    {
      "part": "gap between sentence and action",
      "measure": "8 px",
      "token": "--space-2"
    },
    {
      "part": "action",
      "measure": "at most one; a small secondary button (36 px, 44 px on coarse pointers) at the end of the first line",
      "token": "--surface-control"
    },
    {
      "part": "close",
      "measure": "neutral tone only, when the information is available elsewhere; a small quiet icon button named Dismiss"
    }
  ],
  "variants": [
    {
      "name": "neutral",
      "use": "states a fact; fill --surface-2; ink --text at 85 percent"
    },
    {
      "name": "warning",
      "use": "something will go wrong unless someone acts; fill --warning at 10 percent opacity; ink --warning-ink, above 4.5:1 in both themes"
    },
    {
      "name": "error",
      "use": "work cannot go on until someone acts; fill --error at 10 percent; ink --error-ink, above 4.5:1 in both themes"
    }
  ],
  "sizes": [
    {
      "name": "band",
      "height": "36 px, 44 px on coarse pointers",
      "padding": "0 12 px, 0 16 px on phones"
    },
    {
      "name": "box",
      "padding": "8 px 12 px"
    }
  ],
  "states": [
    {
      "name": "present at load",
      "change": "rendered in place, no motion, no announcement"
    },
    {
      "name": "raised while working",
      "change": "fades in",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "resolved",
      "change": "removed; content moves up"
    },
    {
      "name": "action busy",
      "change": "the button shows its spinner and keeps its width"
    },
    {
      "name": "reduced motion",
      "change": "no fade"
    },
    {
      "name": "action focus",
      "change": "focus ring",
      "tokens": [
        "--focus-ring",
        "--focus-ring-width",
        "--focus-ring-offset"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab",
      "action": "reaches the action, then the close button, in reading order before the content"
    },
    {
      "key": "Enter or Space",
      "action": "runs the action"
    }
  ],
  "accessibility": [
    "error raised after the reader acts: role alert, heard once",
    "warning or neutral raised while working: announced through the polite live region",
    "present at load: read in place, no announcement",
    "the sentence names the problem; color is not the only signal",
    "after a failed submit, focus moves to the first field with an error, and the message at the top of the form is announced"
  ],
  "content": [
    "one sentence of what is true and what to do",
    "the action repeats the verb of the fix (Reconnect, Try again, Request access)",
    "never an error code as the message"
  ],
  "tokens": [
    "--surface-2",
    "--error",
    "--warning",
    "--warning-ink",
    "--error-ink",
    "--text",
    "--surface-1",
    "--surface-control",
    "--radius-lg",
    "--space-2",
    "--space-3",
    "--space-4",
    "--duration-fast",
    "--ease-standard",
    "--focus-ring",
    "--focus-ring-width",
    "--focus-ring-offset"
  ],
  "rules": [
    "one inline message per surface; order of precedence error, warning, neutral",
    "warning and error have no close button; they leave when the condition resolves",
    "the message pushes content down and never overlays it"
  ]
}