Layout & Display
Overlay backdrop for modals, drawers, and menus, with blur and stacking support.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content rendered above the backdrop. |
children
ReactNode
Default: —
Content rendered above the backdrop.
| Prop | Type | Default | Description |
|---|---|---|---|
blur | boolean | "sm" | "md" | "lg" | number | true (8px) | Backdrop blur amount. |
backgroundColor | string | "var(--oks-palette-neutral-950, #000)" | Backdrop tint color. |
backgroundOpacity | number | 80 | Backdrop opacity (0-100). |
blur
boolean | "sm" | "md" | "lg" | number
Default: true (8px)
Backdrop blur amount.
backgroundColor
string
Default: "var(--oks-palette-neutral-950, #000)"
Backdrop tint color.
backgroundOpacity
number
Default: 80
Backdrop opacity (0-100).
| Prop | Type | Default | Description |
|---|---|---|---|
zIndex | number | — | Explicit stacking z-index; auto-computed per overlay depth when unset. |
portal | boolean | true | Renders through a React portal. |
container | Element | DocumentFragment | null | — | Custom portal mount target. |
contentFullSize | boolean | false | Stretches the content wrapper to fill the backdrop. |
zIndex
number
Default: —
Explicit stacking z-index; auto-computed per overlay depth when unset.
portal
boolean
Default: true
Renders through a React portal.
container
Element | DocumentFragment | null
Default: —
Custom portal mount target.
contentFullSize
boolean
Default: false
Stretches the content wrapper to fill the backdrop.
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | — | Controls whether the backdrop is open (required). |
closeOnOutsideClick | boolean | true | Closes when clicking outside the content. |
closeOnEscape | boolean | true | Closes on Escape. |
lockScroll | boolean | true | Locks body scroll while open. |
trapFocus | boolean | true | Traps keyboard focus within the content while open. |
isOpen
boolean
Default: —
Controls whether the backdrop is open (required).
closeOnOutsideClick
boolean
Default: true
Closes when clicking outside the content.
closeOnEscape
boolean
Default: true
Closes on Escape.
lockScroll
boolean
Default: true
Locks body scroll while open.
trapFocus
boolean
Default: true
Traps keyboard focus within the content while open.
| Prop | Type | Default | Description |
|---|---|---|---|
animationDuration | number | 0.3 | Enter/exit animation duration in seconds. |
animationType | "fade" | "zoom" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | fade | Entrance/exit animation. |
easing | "ease" | "easeIn" | "easeOut" | "easeInOut" | ease | Animation easing curve. |
animationDuration
number
Default: 0.3
Enter/exit animation duration in seconds.
animationType
"fade" | "zoom" | "slideUp" | "slideDown" | "slideLeft" | "slideRight"
Default: fade
Entrance/exit animation.
easing
"ease" | "easeIn" | "easeOut" | "easeInOut"
Default: ease
Animation easing curve.
| Prop | Type | Default | Description |
|---|---|---|---|
onClose | () => void | — | Called to close the backdrop (required). |
onClose
() => void
Default: —
Called to close the backdrop (required).
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Class applied to the backdrop layer. |
style | CSSProperties | — | Inline styles for the backdrop layer. |
contentClassName | string | — | Class applied to the content wrapper. |
contentStyle | CSSProperties | — | Inline styles for the content wrapper. |
className
string
Default: —
Class applied to the backdrop layer.
style
CSSProperties
Default: —
Inline styles for the backdrop layer.
contentClassName
string
Default: —
Class applied to the content wrapper.
contentStyle
CSSProperties
Default: —
Inline styles for the content wrapper.
