SweetAlert는 사용자에게 예쁘고 간단한 알림 메시지를 제공하는 JavaScript 라이브러리입니다. SweetAlert는 여러 가지 버튼 옵션을 제공해 사용자와 상호작용할 수 있습니다.

기본적인 버튼

SweetAlert.fire() 메소드를 사용하여 SweetAlert 알림을 생성할 수 있습니다. 이 때, 기본적으로 “확인” 버튼이 포함되어 있습니다. 다음은 “확인” 버튼을 사용하는 예시입니다.

Swal.fire({
  title: "알림",
  text: "정상적으로 처리되었습니다.",
  icon: "success",
  confirmButtonText: "확인"
});

추가 버튼

SweetAlert에는 추가적인 버튼을 사용할 수 있는 옵션이 있습니다. buttons 속성을 사용하여 원하는 만큼의 버튼을 추가할 수 있습니다. 각 버튼은 객체로 구성되며 text 속성을 통해 버튼의 텍스트를 설정할 수 있습니다.

Swal.fire({
  title: "환영합니다!",
  text: "계속 진행하시겠습니까?",
  icon: "question",
  showCancelButton: true,
  confirmButtonText: "예",
  cancelButtonText: "아니오",
  buttonsStyling: true
});

위의 예시에서는 “예”와 “아니오” 버튼이 추가되었습니다. 사용자가 버튼을 누르면 SweetAlert는 이에 대한 콜백 함수를 호출하여 원하는 동작을 수행할 수 있습니다.

커스텀 버튼 스타일

기본적으로 SweetAlert의 버튼은 미리 정의된 스타일을 따릅니다. 그러나 customClass 옵션을 사용하여 버튼에 사용자 정의 스타일을 적용할 수도 있습니다. 다음은 “확인” 버튼에 커스텀 스타일을 적용하는 예시입니다.

Swal.fire({
  title: "알림",
  text: "정상적으로 처리되었습니다.",
  icon: "success",
  confirmButtonText: "확인",
  customClass: {
    confirmButton: "myCustomButtonClass"
  }
});

위의 예시에서 myCustomButtonClass는 사용자가 정의한 CSS 클래스 이름입니다. 이를 통해 버튼에 원하는 스타일을 적용할 수 있습니다.

참고 자료

• SweetAlert 공식 문서: https://sweetalert.js.org/
• SweetAlert GitHub 저장소: https://github.com/sweetalert2/sweetalert2

SweetAlert의 버튼 옵션에 대해서 알아보았습니다. 다양한 스타일의 버튼을 사용하여 사용자와 상호작용하고 훌륭한 사용자 경험을 제공할 수 있습니다. SweetAlert는 간편한 사용법과 다양한 옵션을 제공하여 웹 개발자들에게 많은 도움을 주는 라이브러리입니다.