Skip to content
Sancho UI
Toggle dark mode
Getting started
Components
Helpers
Built with ☕ by
Ben McMahen

Layer

A layer provides the building blocks of many Sancho components. It's useful for highlighting content and distinguishing it from other elements on the screen.

Basic usage

The elevation prop determines the size of the box-shadow and provides a sense of depth.

xs
sm
md
lg
xl
<div className="Layer-example">
  <Layer elevation="xs">
    <Text>xs</Text>
  </Layer>
  <Layer elevation="sm">
    <Text>sm</Text>
  </Layer>
  <Layer elevation="md">
    <Text>md</Text>
  </Layer>
  <Layer elevation="lg">
    <Text>lg</Text>
  </Layer>
  <Layer elevation="xl">
    <Text>xl</Text>
  </Layer>
</div>

API

Layer
elevationLayerElevations
The size of the shadow to use
children*ReactNode
The contents of the layer
cssInterpolationWithTheme<any>
LayerLoading
loading*boolean
Whether the layer is currently loading
labelstring
An optional label to display below the loading spinner
cssInterpolationWithTheme<any>