# Inline message

States a lasting condition of one surface at the top of that surface, with the one action that resolves it.

* Kind: component
* Page: https://design.werklist.com/components/inline-message
* Version: 2.1.2

## When to use it

* 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)

## When not to use it

* 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

## 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

## Anatomy

* band: 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 (--space-3, --space-4)
* box: corner radius 8 px; padding 8 px by 12 px (--radius-lg, --space-2, --space-3)
* sentence: regular weight on a line of 1.375; wraps and is never cut off
* gap between sentence and action: 8 px (--space-2)
* action: at most one; a small secondary button (36 px, 44 px on coarse pointers) at the end of the first line (--surface-control)
* close: neutral tone only, when the information is available elsewhere; a small quiet icon button named Dismiss

## Variants

* neutral: states a fact; fill --surface-2; ink --text at 85 percent
* warning: something will go wrong unless someone acts; fill --warning at 10 percent opacity; ink --warning-ink, above 4.5:1 in both themes
* error: work cannot go on until someone acts; fill --error at 10 percent; ink --error-ink, above 4.5:1 in both themes

## Sizes

* band: height 36 px, 44 px on coarse pointers, padding 0 12 px, 0 16 px on phones
* box: padding 8 px 12 px

## States

* present at load: rendered in place, no motion, no announcement
* raised while working: fades in (--duration-fast, --ease-standard)
* resolved: removed; content moves up
* action busy: the button shows its spinner and keeps its width
* reduced motion: no fade
* action focus: focus ring (--focus-ring, --focus-ring-width, --focus-ring-offset)

## Keyboard

* Tab: reaches the action, then the close button, in reading order before the content
* Enter or Space: 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