Highlight

Usage

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.

Generated Image / Accessibility

Highlight / API

On this page

Tone follows severity

Room for the bar

When not to use it

Highlight

Usage

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.

Generated Image / Accessibility

Highlight / API

On this page

Tone follows severity

Room for the bar

When not to use it