Dialog

Overlay & Menus

Dialog

Material dialog with optional hero icon, content, and action rows.

Usage

Confirm high-impact actions or present blocking information.

Highlights

• Configurable elevation and width
• Composable header/content/footer

When to use it

• You need user confirmation before destructive actions.
• Form fragments are short and can live inside a modal.

Related components

ModalActionSheetDrawer

Examples

Usage with Trigger

Preview (Web)

import { useState } from 'react';
import { Button } from 'react-native-molecules/components/Button';
import { Dialog } from 'react-native-molecules/components/Dialog';
import { Text } from 'react-native-molecules/components/Text';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
      <>
          <Button onPress={() => setOpen(true)}>Show Dialog</Button>
          <Dialog iconProps={{ name: 'cellphone-check' }} isOpen={open} onClose={() => setOpen(false)}>
              <Dialog.Title>Dialog with Hero Icon</Dialog.Title>
              <Dialog.Content>
                  <Text>
                      Dialog is a type of modal window that appears in front of app content to provide
                      critical information, or ask for a decision
                  </Text>
              </Dialog.Content>
              <Dialog.Actions>
                  <Button onPress={() => setOpen(false)}>Cancel</Button>
                  <Button onPress={() => setOpen(false)}>Confirm</Button>
              </Dialog.Actions>
          </Dialog>
      </>
  );
}

Prop	Type	Default	Description
childrenRequired	ReactNode	—	—
style	StyleProp<ViewStyle>	—	—
isOpenRequired	boolean	—	—
onClose	((() => void) & (() => void)) | undefined	—	—
iconProps	IconProps | undefined	—	—

Defined in react-native-molecules/components/Dialog