Skip to main content

Surface

Material surfaces can be displayed in different shapes. Shapes direct attention, identify components, communicate state, and express brand.

import { Surface } from "@react-native-material/core";
<Surface style={{ width: 120, height: 120, elevation: 2 }} /><Surface style={{ width: 120, height: 120, elevation: 4 }} /><Surface style={{ width: 120, height: 120, elevation: 6 }} />

Material surfaces have a rectangular shape by default, with 4dp rounded corners. Their shape can be customized by adjusting their:

  • Corner angles and curves
  • Edge angles and curves

The size of shape changes can be subtle or more significant.

๐Ÿ’ฌ Feedback

Elevation#