Dialog

A modal dialog component for displaying important information, confirmations, and forms that require user attention.

Import

import { Dialog } from '@smart-tv/ui';

Basic Usage

Create a simple dialog with title and content.

const [isOpen, setIsOpen] = useState(false);

<>
  <Button focusKey="open-dialog" onEnterPress={() => setIsOpen(true)}>
    Open Dialog
  </Button>

  <Dialog
    focusKey="basic-dialog"
    open={isOpen}
    onClose={() => setIsOpen(false)}
  >
    <Dialog.Title>Confirmation</Dialog.Title>
    <Dialog.Content>
      Are you sure you want to continue?
    </Dialog.Content>
    <Dialog.Actions>
      <Button focusKey="cancel" onEnterPress={() => setIsOpen(false)}>
        Cancel
      </Button>
      <Button focusKey="confirm" onEnterPress={handleConfirm}>
        Confirm
      </Button>
    </Dialog.Actions>
  </Dialog>
</>

Alert Dialog

Display important alerts or warnings.

<Dialog
  focusKey="alert-dialog"
  open={showAlert}
  onClose={() => setShowAlert(false)}
  variant="alert"
>
  <Dialog.Title>Error</Dialog.Title>
  <Dialog.Content>
    <p>Something went wrong. Please try again.</p>
  </Dialog.Content>
  <Dialog.Actions>
    <Button focusKey="ok" onEnterPress={() => setShowAlert(false)}>
      OK
    </Button>
  </Dialog.Actions>
</Dialog>

Form Dialog

Use dialogs for collecting user input.

<Dialog
  focusKey="form-dialog"
  open={showForm}
  onClose={() => setShowForm(false)}
>
  <Dialog.Title>Edit Profile</Dialog.Title>
  <Dialog.Content>
    <form>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
    </form>
  </Dialog.Content>
  <Dialog.Actions>
    <Button focusKey="cancel" onEnterPress={() => setShowForm(false)}>
      Cancel
    </Button>
    <Button focusKey="save" onEnterPress={handleSave}>
      Save
    </Button>
  </Dialog.Actions>
</Dialog>

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier
open	boolean	false	Dialog visibility state
onClose	function	-	Close callback
variant	string	default	Visual variant (default, alert, confirm)
closeOnBackdropClick	boolean	true	Close when clicking backdrop
className	string	-	Additional CSS classes

Best Practices

Use dialogs sparingly for important information only
Always provide a clear way to close the dialog
Focus the primary action button when dialog opens
Keep dialog content concise and scannable
Use appropriate variants for different dialog types
Trap focus within the dialog while open