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>