Attention

Attention(__namedParameters): ReactElement

Defined in: react/components/layout/attention.tsx:33

A bordered panel whose border breathes with the $attention accent to pull the eye toward a decision the user needs to make — a permission prompt, a Q&A, a confirm step. Louder than the ambient focus breathing and independent of focus: it pulses to say “look here”, not “you are here”.

With motion disabled (reduced-motion / tests) it shows a static $attention border, so the urgency still reads without movement.

<Attention title="Permission required" style={{ padding: 1 }}>
  <Label>Allow access to the clipboard?</Label>
  <HBox>
    <Button onClick={allow}>Allow</Button>
    <Button onClick={deny}>Deny</Button>
  </HBox>
</Attention>

Parameters

__namedParameters

AttentionProps

Returns

ReactElement