ZStack

ZStack layers children in the same grid area without forcing absolute positioning. It is useful for badges, status overlays, empty states, and media labels.

#Default usage

<ZStack align="center" justify="center">
  <Card><CardContent><Text tone="muted">Base layer</Text></CardContent></Card>
  <Badge variant="info">Overlay</Badge>
</ZStack>

#Import

import { Badge, Card, ZStack } from "@froggdesign/enter-ui-react";

#Alignment

#Patterns

#Accessibility

ZStack is layout-only and does not change child semantics. Avoid duplicating meaningful content across layers, and make decorative images use empty alt text.

#API

• as: div, section, article, main, aside, nav, header, or footer.
• align: start, center, end, or stretch.
• justify: start, center, end, or stretch.
• fullWidth: sets width to 100%.
• top, right, bottom, left: external spacing (margin).
• padding, paddingTop, paddingRight, paddingBottom, paddingLeft: internal spacing.
• Extends native props for the rendered element and supports className.

#Spacing

<ZStack top={8} paddingLeft={12} align="center" justify="center">
  <Card>
    <CardContent>
      <Text tone="muted">Overlay stack</Text>
    </CardContent>
  </Card>
  <Badge variant="info">New</Badge>
</ZStack>

#Styling

ZStack uses .eui-zstack and CSS Grid layering. Direct children share the same grid cell, which keeps overlays predictable without requiring custom absolute positioning for simple layer patterns.