grommet
components

Layer

an overlay

Storybook
CodeSandbox

Props

animate

Whether to animate the Layer content when it opens. This property is deprecated and will be removed in the next major version of grommet. Instead, use 'animation'.

truefalse

animation

Animation transition of the Layer content when it opens and closes.
"slide""fadeIn""none"truefalse

background

Either a color identifier to use for the background color. For example: 'neutral-1'. Or, a 'url()' for an image. Dark is not needed if color is provided.

"string"
{
color:
"string"
{
dark:
"string,"
light: string
}
dark:
"boolean""string,"
image:
"string,"
position:
"string,"
opacity:
"string""boolean""number""weak""medium""strong,"
repeat:
"no-repeat""repeat""string,"
size:
"cover""contain""string,"
light: string
}

full

Whether the width and/or height should fill the current viewport size.

truefalse"vertical""horizontal"

margin

The amount of margin around the Layer. An object can be specified to distinguish horizontal margin, vertical margin, and margin on a particular side of the layer

"none"
"xsmall"
"small"
"medium"
"large"
"any CSS size"
{
  "vertical": "...",
  "horizontal": "...",
  "top": "...",
  "bottom": "...",
  "left": "...",
  "right": "..."
}

onClickOutside

Function that will be invoked on modal layers when the user clicks outside the layer.

() => {}

onEsc

Function that will be called when the user presses the escape key inside the layer.

() => {}

plain

Whether this is a plain Layer with no background color, border, or elevation.

truefalse

position

Position of the layer content.
"bottom""bottom-left""bottom-right""center""end""hidden""left""right""start""top""top-left""top-right"

responsive

Whether the layer should take full width and height on mobile. If a target is provided, the Layer will take the full width and height of the target.

truefalse

target

Target where the layer will be aligned to. This should be a React reference.

"object"

Theme

global.size.xxsmall

The minimal height of the Layer.
"48px"

layer.background

The background color of the Layer Container.
{"dark": "black", "light": "white"}

layer.border.radius

The rounding of the Layer corners.
"4px"

layer.border.intelligentRounding

Whether the border-radius of the Layer should adapt based on the Layer's position. Wherever the Layer is touching the edge of the screen, a border-radius of 0 will be applied.

boolean

layer.container.zIndex

The stack order of Layer Container.
"20"

layer.extend

Any additional style for Layer.
"any CSS"
(props) => {}

layer.container.elevation

Elevated height above the underlying container, indicated via a drop shadow. Any Box elevation value is valid.

'none' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string

layer.container.extend

Any additional style for Layer Container.
"any CSS"
(props) => {}

layer.overlay.background

The background of the Layer overlay.
"rgba(0, 0, 0, 0.5)"

layer.responsiveBreakpoint

The actual breakpoint to trigger changes in the border, direction, gap, margin, pad, and round.

"small"

layer.zIndex

The stack order of Layer.
"20"

global.breakpoints

The possible breakpoints that could affect border, direction, gap, margin, pad, and round.

{
  "small": {
    "value": 768,
    "borderSize": {
      "xsmall": "1px",
      "small": "2px",
      "medium": "4px",
      "large": "6px",
      "xlarge": "12px"
    },
    "edgeSize": {
      "none": "0px",
      "hair": "1px",
      "xxsmall": "2px",
      "xsmall": "3px",
      "small": "6px",
      "medium": "12px",
      "large": "24px",
      "xlarge": "48px"
    },
    "size": {
      "xxsmall": "24px",
      "xsmall": "48px",
      "small": "96px",
      "medium": "192px",
      "large": "384px",
      "xlarge": "768px",
      "full": "100%"
    }
  },
  "medium": {"value": 1536},
  "large": {}
}