Dialog

Modal overlay for displaying focused content above the page with a backdrop.

About Dialog

Container that displays content above the page with a backdrop overlay. Used for alerts, confirmations, and focused user interactions requiring user attention.

Installation

Import the Dialog component from LSD:

import { Dialog } from '@nipsys/lsd'

export default function MyComponent() {
  return <Dialog />
}

Usage

The simplest form of the component with default styling.

Basic

API Reference

Radix UI Documentation

Dialog wraps Radix UI primitives

View Radix UI Dialog documentation →

Accessibility

The component follows accessibility best practices for screen readers and keyboard navigation.

Keyboard Navigation

Keyboard shortcuts and navigation

• Escape - Close the dialog• Tab - Move focus between focusable elements within the dialog• Shift + Tab - Move focus backwards through focusable elements

ARIA Attributes

Proper ARIA attributes for screen readers

• role="dialog" is applied to the dialog content• aria-modal="true" indicates modal behavior• aria-labelledby links to the dialog title• aria-describedby links to the dialog description• aria-label can be used for dialogs without visible titles

Focus States

Visible focus indicators for keyboard users

• Focus is trapped within the dialog when open• Focus moves to the first focusable element when dialog opens• Focus returns to the trigger when dialog closes• Outside click and Escape close the dialog

Alert-dialog