Blanket
A blanket covers the underlying UI for a layered component, such as a modal dialog or a tooltip.Usage
A blanket covers the underlying UI and is intended to be used with layered components, such as a modal dialog.
Use tinted blankets to give visual affordance when the blanket area shouldn’t be interacted with.
Accessibility
- The blanket is controlled by the layered component that it belongs to, like a modal. Make sure that the layered component provides options to dismiss the layer for keyboard users as well as on click.
- If you allow the components beneath the blanket to be interacted with, don’t include a tint as this reduces color contrast.
- The blanket component is commonly used with the modal dialog component.
- Other components that use the blanket include the drawer and spotlight.