Alert-dialog

AlertDialog - Modal dialog for critical user decisions Interrupts the user's workflow to gather acknowledgment or action on important information. Blocks interaction with the page content when open and requires an explicit response.

About AlertDialog

Modal dialog for critical user decisions Interrupts the user's workflow to gather acknowledgment or action on important information. Blocks interaction with the page content when open and requires an explicit response.

Installation

Import the AlertDialog component from LSD:

import { AlertDialog } from '@nipsys/lsd'

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

Variants

Component variants for different visual styles and use cases.

Basic

Basic example

API Reference

There are no documented props for this component. Props are documented via TSDoc in Props interfaces within the component or types.ts files.

Accessibility

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

Keyboard Navigation

Keyboard shortcuts and navigation

• Tab - Navigate through interactive elements in the dialog• Shift + Tab - Navigate to previous interactive element• Escape - Close the dialog• Enter or Space - Activate focused action button

ARIA Attributes

Proper ARIA attributes for screen readers

• role="dialog" identifies the component as a dialog• aria-modal="true" indicates dialog blocks interaction• aria-labelledby links to the dialog title• aria-describedby links to the dialog description

Focus States

Visible focus indicators for keyboard users

• Focus moves to first interactive button when dialog opens• Focus is trapped within the dialog while open• Focus returns to trigger element when dialog closes

Alert