Alerts

.alert.info, .alert.success, .alert.warning, .alert.error

사용자에게 중요한 정보나 상태를 알리는 알림 컴포넌트입니다.

Alert Types

4가지 상태의 알림을 제공합니다.

Information: 새로운 버전 2.0이 출시되었습니다. 업데이트 내역을 확인해보세요.

Success: 파일이 성공적으로 업로드되었습니다. 처리가 완료되었습니다.

Warning: 저장 공간이 부족합니다. 불필요한 파일을 정리해주세요.

Error: 요청을 처리하는 중 오류가 발생했습니다. 다시 시도해주세요.

일반적인 정보나 안내 메시지에 사용합니다.

Tip: 키보드 단축키 Ctrl+S를 사용하면 빠르게 저장할 수 있습니다.

info 클래스를 추가하여 정보 알림을 표시합니다.

<div class="alert info">
    <strong>Tip:</strong> 키보드 단축키 Ctrl+S를 사용하면 빠르게 저장할 수 있습니다.
</div>

작업 완료나 성공적인 결과를 알립니다.

완료! 프로필 정보가 성공적으로 업데이트되었습니다.

작업이 성공적으로 완료되었을 때 사용합니다.

<div class="alert success">
    <strong>완료!</strong> 프로필 정보가 성공적으로 업데이트되었습니다.
</div>

주의가 필요한 상황이나 잠재적 문제를 경고합니다.

주의: 비밀번호가 30일 후 만료됩니다. 미리 변경해주세요.

사용자의 주의가 필요한 상황에 사용합니다.

<div class="alert warning">
    <strong>주의:</strong> 비밀번호가 30일 후 만료됩니다. 미리 변경해주세요.
</div>

오류 상황이나 실패한 작업을 알립니다.

오류: 네트워크 연결에 실패했습니다. 인터넷 연결을 확인해주세요.

오류 발생 시 사용자에게 명확하게 알립니다.

<div class="alert error">
    <strong>오류:</strong> 네트워크 연결에 실패했습니다. 인터넷 연결을 확인해주세요.
</div>

Alert에 사용되는 색상 토큰입니다.

Type	Background	Border	Text
Info	#EFF6FF	#BFDBFE	#1E40AF
Success	#ECFDF5	#A7F3D0	#065F46
Warning	#FFFBEB	#FDE68A	#92400E
Error	#FEF2F2	#FECACA	#991B1B