Highlight wraps a subject the person is watching but does not own, such as a queue row, a call card or a seat tile, and tells them "this one needs your eye". It paints a tinted wash over the subject and a 4px bar on its inline-start edge. It never interrupts: it is not a live region, never moves focus and never scrolls.
Tone follows severity
Pass the effect's severity. There is no colour prop, and red belongs to S5 only.
AttentionSeverity
Wash
Meaning
S3
Info
Something changed here
S4
Warning
Needs attention soon
S5
Error
Needs the person now
The bar is the same neutral shape cue in every tone, so the state survives without colour.
Room for the bar
The bar overlays the first 4px of the subject. Give the subject at least 8px of inline-start padding. The highlight adds none of its own, because toggling it must not shift the subject.
When not to use it
On a table row. A row cannot be wrapped in a div; the table owns row paint.
For selection. A selected row has its own fill.
As a replacement for a toast, banner or dialog. Those interrupt; this does not.
For a small mark on something already in use. Use AmbientMarker.