Skip to content

Custom Class

Reference

In SweetAlert2, customClass is a property that allows you to assign custom CSS classes to various elements of the popup. This is particularly useful for customizing the appearance of a SweetAlert2 popup without directly modifying the default styles or themes.

.my-popup-class {
  background-color: #f0f0f0;
  border: 2px solid #333;
}

.my-title-class {
  color: #ff0000;
  font-size: 24px;
}

.my-confirm-button-class {
  background-color: #4caf50;
  color: white;
}
.CustomClass(cs => cs
    .Title("my-title-class")
    .Popup("my-popup-class")
    .ConfirmButton("my-confirm-button-class"))
customClass: {
  container: '...',
  popup: '...',
  header: '...',
  title: '...',
  closeButton: '...',
  icon: '...',
  image: '...',
  htmlContainer: '...',
  input: '...',
  inputLabel: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....',
  timerProgressBar: '....',
}

Container

.Container("my-class")
.Popup("my-class")
.Header("my-class")

Title

.Title("my-class")

CloseButton

.CloseButton("my-class")

Icon

.Icon("my-class")

Image

.Image("my-class")

HtmlContainer

.HtmlContainer("my-class")

Input

.Input("my-class")

InputLabel

.InputLabel("my-class")

ValidationMessage

.ValidationMessage("my-class")

Actions

.Actions("my-class")

ConfirmButton

.ConfirmButton("my-class")

DenyButton

.DenyButton("my-class")

CancelButton

.CancelButton("my-class")

Loader

.Loader("my-class")
.Footer("my-class")

TimerProgressBar

.TimerProgressBar("my-class")