Skip to main content

Overlays

Dialog

Native modal dialog with backdrop, focus trap, and escape-to-close.

Element
<dialog>
Module
@basenative/components
Function
renderDialog

Quick start

Import the render function and call it from your server template.

import { renderDialog } from '@basenative/components';

renderDialog({ title: 'Confirm', content: '...', id: 'confirm' });
document.getElementById('confirm').showModal();

Examples

Each block is a real server render — no mockups, no virtual DOM.

Modal dialog

Native <dialog> opened with showModal(). Escape, the × and the footer buttons close it.

Live render

Confirm action

Are you sure you want to proceed? This cannot be undone.
Source
const dialog = renderDialog({ title, content, footer, id: 'd' });

document.getElementById('d').showModal();
// Native: Escape closes it. Wire [data-bn="dialog-close"] for the × button.

Options

Arguments accepted by renderDialog().

renderDialog option reference
Option Type Default Description
title string — Dialog header text.
content string — Body HTML.
footer string '' Footer HTML (buttons).
id string 'dialog' Element id.