Inline Dialog

Overview

InlineDlg renders a dialog panel inline within the page flow, positioned near its trigger element. Unlike modal dialogs, it does not use a backdrop or trap focus.

Usage

HTML
React

<button type="button">Edit</button>
<div class="pm-inline-dlg pm-inline-dlg--visible" role="dialog">
  <div class="pm-inline-dlg__body">
    <p>Edit your settings here.</p>
  </div>
</div>

import { InlineDlg, InlineDlgBody } from "@paramanu/overlays-react"

<InlineDlg visible>
  <InlineDlgBody>
    <p>Edit your settings here.</p>
  </InlineDlgBody>
</InlineDlg>

Guidelines

Use for non-modal interactions like inline editing or quick actions
Keep content focused and concise
Provide a clear way to dismiss (click outside or explicit close)
Consider using a modal Dialog for complex or critical interactions

API

Prop	Type	Default	Description
`visible`	`boolean`	`false`	Whether the inline dialog is visible