AlertDialog

The AlertDialog component can be used to alert users via a dialog or to confirm actions.

Import

import { toast, ToastContainer, useAlertDialog } from '@sajari-ui/core';

import { toast, ToastContainer, useAlertDialog } from '@sajari-ui/core';

Usage

Editable Example

function Example() {
  const { open, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onClick={onOpen}>Show</Button>

      <AlertDialog open={open} onClose={onClose} title="Alert" description="This is a an example of a basic alert." />
    </>
  );
}

function Example() {
  const { open, onOpen, onClose } = useDisclosure();
  return (
    <>
      <Button onClick={onOpen}>Show</Button>
      <AlertDialog open={open} onClose={onClose} title="Alert" description="This is a an example of a basic alert." />
    </>
  );
}

Confirm example

When a user is performing an action such as a delete, we may want to confirm they want to perform that action.

Editable Example

function ConfirmExample() {
  const { open, onOpen, onClose } = useDisclosure();
  const onConfirm = () =>
    toast(
      {
        title: 'Project deleted',
        description: 'We successfully deleted your project',
        appearance: 'success',
      },
      {
        autoClose: 9000,
      },
    );

  return (
    <>
      <ToastContainer />
      <Button onClick={onOpen} appearance="danger">
        Delete
      </Button>

      <AlertDialog
        open={open}
        onClose={onClose}
        onConfirm={onConfirm}
        title="Delete Project"
        description={
          <Text>
            Are you sure you want to delete the <Text as="strong">Example</Text> project? All data will be lost.
          </Text>
        }
        confirmLabel="Delete"
        destructive
      />
    </>
  );
}

function ConfirmExample() {
  const { open, onOpen, onClose } = useDisclosure();
  const onConfirm = () =>
    toast(
      {
        title: 'Project deleted',
        description: 'We successfully deleted your project',
        appearance: 'success',
      },
      {
        autoClose: 9000,
      },
    );
  return (
    <>
      <ToastContainer />
      <Button onClick={onOpen} appearance="danger">
        Delete
      </Button>
      <AlertDialog
        open={open}
        onClose={onClose}
        onConfirm={onConfirm}
        title="Delete Project"
        description={
          <Text>
            Are you sure you want to delete the <Text as="strong">Example</Text> project? All data will be lost.
          </Text>
        }
        confirmLabel="Delete"
        destructive
      />
    </>
  );
}

Props

Name	Type	Default	Description
`title`	`string`		The title of the dialog.
`description`	`ReactText`		The description of the dialog.
`confirmLabel`	`string`	`'Confirm'`	The label on the confirm action.
`destructive`	`boolean`	`false`	Whether the confirm action is destructive. If true, the confirm action button will use the `danger` appearance.
`closeLabel`	`string`	`'OK'` or `'Cancel'`	The label on the close action. If `onConfirm` is specified, it's assumed as a confirm and the default becomes 'Cancel'.
`onConfirm`	`function`		Callback function for when the user confirms the action.
`onClose`	`function`		Callback function to close the toast.