Homecomponentsstructural

Cover

A container that can cover the containing element or a given CoverBoundary.

Overview

Creates a container that covers the containing element. It is like a stack but on the "Z" axis. This comes useful when you'd want to position elements over other elements.

Here's an example of a button placed over an image. Here, the Column is the element that is covered.

Hola!

Open in Playroom

Cover is invisible and non-interactive. It doesn't capture any pointer events. This way, the elements behind it remain accessible.

Custom Cover Boundary

Cover is automatically contained by several in-built components like Card and Column. In case you want to contain something else, use a CoverBoundary to create a coverable area.

Here's an example of an image inside a CoverBoundary with a button over it.