Layer

an overlay

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

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 or border.

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

truefalse

Theme

global.size.xxsmall

The minimal height of the Layer.

"48px"

layer.background

The background color of the Layer Container.

"white"

layer.container.zIndex

The stack order of Layer Container.

"15"

layer.extend

Any additional style for Layer.

"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.

"10"

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": {}
}