Blanket

When to use this component

Use blankets when:

• You need to direct user attention to a specific element
• Interaction with the main page should be temporarily blocked
• Modal dialogs, drawers, or loaders need visual separation from the background
• You want to create a visual hierarchy between active and inactive content

How to use this component

• Use consistent opacity (50% black) to dim background content
• Block interaction with page elements beneath the blanket
• Allow clicking the blanket to dismiss non-critical overlays (like drawers)
• Require explicit action to dismiss critical overlays (like confirmation dialogs)
• Control the blanket through its parent component
• Ensure proper tab order is constrained to the focused element
• Remember that blankets don’t have their own show/hide functionality