Elevation allows elements to be lifted from the background. It can be defined by applying drop shadows or other visual cues, such as color and borders.
Elevation using shadows
Reflects a spatial relationship by indicating separation from the background or allowing content to be scrolled under another element. Elevation using shadows includes two levels: floating and raised.
Default elevation level that elevates messages temporarily appearing in front of other surfaces, such as modals and banners. Available through the
borderStyle prop in Box. For dark mode, we use the
elevationFloating background of Box instead of a shadow.
Presents a drop shadow on the edge of a top or bottom component, allowing surfaces to move behind when scrolled. Available through the
borderStyle prop in Box. In dark mode, the raised border should be paired with the
elevationRaised background color.
Elevation using color
Use as needed to accent containers when shadows are not an option. Available with
color="elevationAccent" in Box.
Elevation using borders
Technically, borders are not considered elevation; however, they can be used as an alternative to display a single contained group when shadows or color don't work. The border treatment helps to determine visible boundaries. Available through the
borderStyle prop in Box.