전체 카탈로그
OverlayOverlay11 props

Overlay

Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior.

공식 문서 열기
live previewOverlay

Preview

Media title

Overlay keeps actions attached to media.

Import

import {Overlay} from '@astryxdesign/core/Overlay';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

When to use

Overlay layers action or supporting content over media, cards, video, or other bounded surfaces with an optional scrim and reveal behavior.

overlayscrimmediahoverfocusimagecard

Important props

showOnhover | always | focus | hover-or-focusoptional
scrimdark | light | falseoptional
positionfill | bottom | topoptional
alignstart | center | endoptional

Theming targets

이 항목은 공개 theming target이 문서화되어 있지 않습니다.

Best practices

  • DoUse overlays for short, contextual actions or labels that belong directly to the underlying media or surface.
  • DoKeep overlay content compact so it remains legible over the scrim and does not obscure important visual information.
  • Do notDo not use Overlay for floating content anchored outside the surface. Use Popover, Tooltip, or Dialog for those patterns.