When you use SweetAlert2 in your React projects, you can display a variety of alert types to communicate different messages to users. Each alert type has its own icon and color scheme, making it easy for users to quickly understand the nature of the message. The main alert types are success, error, warning, info, and question.

A success alert typically uses a green checkmark icon and is best suited for confirming that an action was completed successfully, such as saving data or submitting a form. Error alerts are marked by a red cross icon and are used to notify users when something has gone wrong, such as a failed network request or invalid input.

Warning alerts use a yellow exclamation mark icon. These are ideal for situations that require caution or user confirmation before proceeding, like deleting important data. Info alerts display a blue information icon and are perfect for sharing helpful tips or additional information that does not require immediate action. Finally, question alerts show a gray question mark icon and are ideal for asking users to make a decision, such as confirming a choice or answering a prompt.

To configure these alert types in SweetAlert2, you specify the icon property in your alert configuration. Here are example configurations for each alert type, along with explanations of when to use them:

Success Alert:

Swal.fire({
  icon: 'success',
  title: 'Saved!',
  text: 'Your changes have been saved successfully.'
});

Use this alert after an operation that completes as expected, like saving a profile.

Error Alert:

Swal.fire({
  icon: 'error',
  title: 'Oops...',
  text: 'Something went wrong. Please try again.'
});

Display this when an operation fails, such as a form submission error.

Warning Alert:

Swal.fire({
  icon: 'warning',
  title: 'Are you sure?',
  text: 'This action cannot be undone.'
});

Use this before performing actions that may have consequences, like deleting data.

Info Alert:

Swal.fire({
  icon: 'info',
  title: 'Information',
  text: 'This is some important information for you.'
});

Show this alert to provide extra details or instructions to users.

Question Alert:

Swal.fire({
  icon: 'question',
  title: 'Continue?',
  text: 'Do you want to proceed with this action?'
});

This alert is useful when you need user confirmation or input before moving forward.