Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior.
ts
| Guidance | Practices |
|---|---|
| Do | Use overlays for short, contextual actions or labels that belong directly to the underlying media or surface. |
| Do | Keep overlay content compact so it remains legible over the scrim and does not obscure important visual information. |
| Don't | Do not use Overlay for floating content anchored outside the surface. Use Popover, Tooltip, or Dialog for those patterns. |
Places compact supporting content in a bottom scrim strip without covering the entire image.
Reveals an overlay action on hover or keyboard focus. Use when actions should stay visually quiet until the media receives attention.