Paper

The Paper component builds on the Color and Container components. Adds box-shadow, padding and border-radius. Border radius and padding could be set with size property from preset of the theme size variations. The elevation property can be used to set the box-shadow individually by choosing from the shadows preset for the theme. For the Color component there is a color property and a variant property too.

Props

Props of the Color | Container components are also available.

Name	Type	Default	Description
children	node		The content of the component.
elevation	integer	2	Values 1, 2, 3, 4, 6, 8, 12, 16, 24 were specified in the default theme. With outlined variant can't use this property.
variant	string - inherit, paper, text, contained, outlined	paper	The variant to use.
size	string - none, small, default, large, extra-large	default	Set border-radius and padding from presets were specified in the theme.
borderRadius	string		Set custom border-radius
arrow	bool	false	Draw arrow with a html element to the Paper top, the Popover component detect it automatically
arrowStyle	object		Custom arrow styles
enableContentContainer	bool	false	Adding a parent `div` container for the children. For this container `max-width` style set to `100%`
ContentComponent	element type or a string		The component used for the parent node for the children. A string to use an internal paper layout eg.:'Modal', 'Card', 'Drawer', other strings for a HTML element. Or use a Component.
ComponentComponentProps	object		Passing props to the `ContentComponent`

The ref is forwarded to the root Color element.

Examples

Default

Paper 1

Paper 2

Paper 3

Primary

The elevation property can be used to set the box-shadow individually by choosing from the shadows preset for the theme. Default is 2.

Elevation 0

Default

Elevation 4

Elevation 8

Border radius and padding could be set with size property from preset of the theme size variations.

Small

Default

Large

Extra

This example shows the color and variant inheritance.

This example shows the color and variant inheritance

The color all case inheriting between Papers

But variant inherited only after setup

The variant inheriting between Papers

These were used, for example, for the buttons

Of course every inheritance is . For inline buttons use paperVariant property, but for other components just set up variant like this contained button with secondary color

Arrow

Paper with arrow for Popover

Modal layout