Lapikit

Dialog component

Dialog

The Dialog component is a modal window based on the native HTML element <dialog>. Thanks to this foundation, it benefits from accessible and semantic features by default, such as focus management, closing with the Escape key or clicking outside the box (unless persistent is enabled).

It can be used to display temporary content above the main interface: messages, forms, confirmations, etc. It is controlled via the prop bindable open, can be customized in position, size, density and style, and adapts easily to all usage contexts.

Lapikit is the toolbox you've been missing.

Clever components, designed for speed and efficiency.

Lightweight, clean, elegant: it does the job without any headaches.

Once adopted, it's hard to go back.

Examples of dialog

Base

Displays a simple dialog with central content. This is the basic use case for displaying a message or a quick interaction.

Lapikit is the toolbox you've been missing.

Clever components, designed for speed and efficiency.

Lightweight, clean, elegant: it does the job without any headaches.

Once adopted, it's hard to go back.

Size

Show how to adjust the size of the Dialog with prop size. You can choose between xs, sm, md, lg and xl to adapt the available space to the content.

Dialog with extra small size
Dialog with small size
Dialog with medium size
Dialog with large size
Dialog with extra large size
Dialog with responsive size. It will be extra small on small screens, small on medium screens, and large on large screens

Density

Allows you to modify the internal density (padding) of the content, with the values compact, comfortable or default. Perfect for adjusting the overall feel of the component

Dialog with default density
Dialog with compact density
Dialog with comfortable density

Position

Change the Dialog’s vertical alignment on the screen (top, center, bottom) to suit your design or the context in which it appears.

Dialog positioned at the top of the viewport
Dialog positioned at the center of the viewport. This is the default position if none is specified.
Dialog positioned at the bottom of the viewport
Dialog positioned at the bottom of the viewport on small screens and at the center on medium and larger screens

Persistent

Makes the Dialog persistent: it no longer closes automatically on clicking outside or on Escape. Very useful to avoid accidental closing during critical actions or long forms.

Dialog with persistent behavior. This dialog will not close when clicking outside of it or pressing the escape key.

API Reference

propstypedescriptiondefaulttype_extend
ref $bindableHTMLElementDirect access to DOM elementundefined
isenumMakes the component <a> or <button> or div.divbutton | a | div
open $bindablebooleanControls component opening/closingfalse
darkbooleanEnable dark theme for component.false
lightbooleanEnable light theme for the component.false
colorstringApplies a custom color to text or icons.undefined
backgroundstringApply a custom background color.undefined
densityenumControls vertical densitydefaultcompact | comfortable | default
roundedstringControls item rounding (none, sm, md, lg, etc.).md
variantenumSets the visual style of the Card.filledoutline | text | filled
classContentstring | string[]Add custom classes to the wrapperundefined
sizeenum | {enum: enum}Set Chip size: xs, sm, md, lg, xl or full.mdxs | sm | md | lg | xl | full
persistentbooleanPrevent closing by clicking outside or with Escape.false
positionenumVertical position of content on screencenterbottom | center | top

Variables CSS

variabledefaultdescription
–-dialog-color–-kit-on-containerText color
–-dialog-background–-kit-containerBackground color
–-dialog-radius--kit-radius-mdDialog edge radius

Remember to follow up with Modal or Popover to create complete user paths.

©2025 Lapikit.

Made with by Nycolaide