To make your alerts more interactive and user-friendly in React using SweetAlert2, you can fully customize the confirm and cancel buttons. You are not limited to the default button labels; you can set your own text for each button using the confirmButtonText and cancelButtonText options. For example, if you want the confirm button to say "Yes, Delete" and the cancel button to say "No, Keep", you can set those properties when calling Swal.fire.

Beyond just the text, you can also change the button colors to match your application's theme or to highlight the most important action. The confirmButtonColor and cancelButtonColor options let you specify any valid CSS color value, such as "#3085d6" for blue or "#d33" for red. This makes it easy to visually distinguish between actions like "Save" and "Discard".

When you need more than two actions, SweetAlert2 allows you to add extra buttons by using the showDenyButton option, along with denyButtonText and denyButtonColor. This is useful for scenarios where you want to offer alternatives beyond just confirm or cancel, such as "Remind Me Later" or "Ignore". Each button can trigger a different callback based on the user's choice, allowing you to handle each response appropriately in your React code.

Suppose you want to present the user with three choices: "Save", "Don't Save", and "Cancel". You can configure SweetAlert2 to display all three buttons and handle each outcome using the result object returned by the alert. In your event handler, you might write:

import Swal from 'sweetalert2';

function showCustomAlert() {
  Swal.fire({
    title: 'Do you want to save changes?',
    showDenyButton: true,
    showCancelButton: true,
    confirmButtonText: 'Save',
    denyButtonText: "Don't Save",
    cancelButtonText: 'Cancel',
    confirmButtonColor: '#3085d6',
    denyButtonColor: '#f6c23e',
    cancelButtonColor: '#d33',
  }).then((result) => {
    if (result.isConfirmed) {
      // User clicked 'Save'
      // Perform save action
    } else if (result.isDenied) {
      // User clicked 'Don't Save'
      // Perform alternative action
    } else if (result.isDismissed) {
      // User clicked 'Cancel' or closed the modal
      // Handle cancel
    }
  });
}

This approach gives you complete control over the button labels, colors, and the logic that runs after each button is pressed. You can use this pattern to add as many actions as SweetAlert2 supports, ensuring your alerts fit your application's needs.