Components
Paper
A surface with a shadow or a border.
Paper is the base of cards, menus and panels. It sets the paper background color and adds either an elevation shadow or a border. It is a Server Component.
import Paper from '@hone-ui/react/Paper';Examples
Raised
Flat with a border
<Paper elevation={3} sx={{ p: 2 }}>Raised</Paper>
<Paper variant="outlined" square sx={{ p: 2 }}>Flat with a border</Paper>
<Paper component="section" aria-label="Summary" sx={{ p: 2 }}>A section</Paper>Props
| Prop | Type | Default | Description |
|---|---|---|---|
elevation | number from 0 to 24 | 1 | The shadow depth. Only the elevation variant uses it. |
variant | 'elevation', 'outlined' | 'elevation' | A shadow or a border. |
square | boolean | false | Removes the rounded corners. |
component | ElementType | 'div' | The element to render. |
sx, className, style, ref, children | Standard. |
Every HTML prop of the element passes through. Values outside 0 to 24 render no shadow, and
outlined ignores elevation.
Notes
- Paper does not read
components.Paper.defaultProps, because it stays a Server Component. - In the Material look's dark mode, raised Paper gets a white gradient over its background color, stronger at higher elevations, so it stands out from the page. A
bgcolorinsxkeeps the gradient on top.
Accessibility
Paper adds no role. Give a landmark element such as section or aside an accessible name.