Component

Dialog

Dialog content component for confirmations and alerts.

React Native

Dialog

Confirmation dialog content and actions.

import { useState } from 'react';
import { Button, Dialog } from '@sohantalukder/rn-kit';

export function DeleteDialog() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button text="Delete item" variant="error" onPress={() => setVisible(true)} />
      <Dialog
        visible={visible}
        title="Delete item?"
        description="This action cannot be undone."
        onDismiss={() => setVisible(false)}
        buttons={[
          { label: 'Cancel', type: 'outline', onPress: () => setVisible(false) },
          { label: 'Delete', type: 'error', onPress: () => setVisible(false) },
        ]}
      />
    </>
  );
}

Live component

successerrorconfirmation

Reserve dialogs for decisions that interrupt flow.
Keep button labels action-oriented.

Usage

import { Dialog } from '@sohantalukder/rn-kit';

import { useState } from 'react';
import { Button, Dialog } from '@sohantalukder/rn-kit';

export function DeleteDialog() {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <Button text="Delete item" variant="error" onPress={() => setVisible(true)} />
      <Dialog
        visible={visible}
        title="Delete item?"
        description="This action cannot be undone."
        onDismiss={() => setVisible(false)}
        buttons={[
          { label: 'Cancel', type: 'outline', onPress: () => setVisible(false) },
          { label: 'Delete', type: 'error', onPress: () => setVisible(false) },
        ]}
      />
    </>
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

visiblebooleanfalseControls whether the overlay or modal is mounted and shown.

titlestring-Short heading rendered at the top of the component.

descriptionstring-Supporting copy shown below the title or primary message.

buttonsDialogButton[][]Action definitions rendered in the dialog footer.

iconIconKey | ReactNode-Icon rendered before content or as the primary visual affordance.

onDismiss() => void-Called after a transient message is dismissed.

Theme

Dialog reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

success
error
confirmation

Best Practices

Reserve dialogs for decisions that interrupt flow.
Keep button labels action-oriented.