Examples

Custom Alert

1. Centered button

Warning!

handleAlert("Warning!", {
    buttonGroupStyle: {
      justifyContent: "center",
    },
    button: {
      text: "Close",
    },
  }

2. Full width button

Error!

handleAlert("Error!", {
    button: {
      text: "Ok",
      style: { 
        width: "100%", 
        textAlign: "center" 
      },
    },
  })

3. Icon included alert

Custom Alert!

handleAlert(
  <div>
    <AlertIcon />
    <p>Custom Alert!</p>
  </div>,
  {
    button: {
      text: "Ok",
      style: { 
        width: "100%", 
        textAlign: "center" 
      },
    },
  })

Custom Confirm

1. Full width buttons

Confirm!

handleAlert("Confirm!", {
    confirmButton: {
      text: "Ok",
      style: { 
        width: "50%", 
        textAlign: "center" 
      },
    },
    cancelButton: {
      text: "Cancel",
      style: { 
        width: "50%", 
        textAlign: "center" 
      },
    },
  })

2. Column direction buttons

Are you sure?

handleConfirm("Are you sure?", {
    buttonGroupStyle: { 
      flexDirection: "column" 
    },
    confirmButton: {
      text: "Yes",
      style: { 
        width: "100%", 
        textAlign: "center" 
      },
    },
    cancelButton: {
      text: "No",
      style: { 
        width: "100%", 
        textAlign: "center" 
      },
    },
  })

3. Icon included confirm

Icon Confirm

handleConfirm(
  <div>
    <ConfirmIcon />
    <p>Icon Confirm</p>
  </div>,
  {
    confirmButton: {
      text: "Yes",
      style: {
        width: "50%",
        textAlign: "center",
      },
    },
    cancelButton: {
      text: "No",
      style: {
        width: "50%",
        textAlign: "center",
      },
    },
  }
);

Get Started