Skip to Content
ComponentsDialog

Dialog

The Dialog component is a modal popup that displays over content with customizable title, text, and action buttons.

Dialog

Basic Usage

<Dialog
  visible={showDialog}
  title="Confirm Action"
  text="Are you sure you want to continue?"
  primaryButton={{
    title: "Confirm",
    onPress: handleConfirm,
  }}
  onClose={() => setShowDialog(false)}
/>

With Icon

import { IconCheck } from "@tabler/icons-react-native";
 
<Dialog
  visible={showDialog}
  icon={<IconCheck size={32} color={Colors.success} />}
  iconBackground={Colors.success}
  title="Success"
  text="Your action was completed successfully!"
  primaryButton={{
    title: "OK",
    onPress: handleConfirm,
  }}
  secondaryButton={{
    title: "Cancel",
    onPress: handleClose,
  }}
  onClose={() => setShowDialog(false)}
/>

Import

import Dialog from "../components/Dialog";

Props

  • visible (boolean, default: false): Whether dialog is visible.
  • onClose (function): Function called when dialog should close.
  • title (string): Dialog title.
  • text (string): Dialog body text.
  • icon (React.Component): Optional icon above title.
  • iconBackground (string): Background color for icon. The color can be the same as the icon color, the color will be auto-lightened.
  • primaryButton (object): Primary button with title and onPress.
  • secondaryButton (object): Secondary button with title and onPress.
CollapsibleSectionDropdownList