UI Guide - UI-KIT

이것은 프라이머리 알림입니다. 중요한 내용을 확인하세요!

이것은 세컨더리 알림입니다. 추가적인 맥락을 제공합니다.

성공! 작업이 성공적으로 완료되었습니다.

오류! 문제가 발생했습니다. 다시 시도해 주세요.

경고! 입력 내용을 다시 확인해 주세요.

정보: 유용한 정보를 확인해 보세요.

라이트 알림: 미묘한 알림입니다.

다크 알림: 일반적인 용도의 메시지에 사용하세요.

주의! 이것은 중요한 정보가 포함된 프라이머리 알림입니다.

알림: 이것은 지원 세부 정보가 포함된 세컨더리 알림입니다.

성공! 작업이 성공적으로 완료되었습니다.

오류! 문제가 발생했습니다. 나중에 다시 시도해 주세요.

경고! 진행하기 전에 입력 내용을 검토해 주세요.

정보: 여기에 도움이 될 만한 정보가 있습니다.

참고: 이것은 미묘한 메시지가 포함된 라이트 알림입니다.

알림: 이 다크 알림은 일반적인 메시지에 적합합니다.

추가 정보가 필요하신가요? 중요한 세부 사항은 이 프라이머리 링크 를 확인하세요.

추가적인 맥락을 위한 도움이 되는 링크 가 포함된 세컨더리 메시지입니다.

작업 성공! 결과를 확인하려면 여기를 클릭하세요.

문제가 발생했습니다. 이 알림 링크 를 통해 자세히 알아보세요.

도움이 될 수 있는 정보가 있습니다. 자세히 보려면 이 링크 를 클릭하세요.

둘러볼 수 있는 부드러운 링크 와 함께 제공되는 가벼운 알림입니다.

일반적인 다크 알림입니다. 자세한 내용은 여기를 클릭하여 확인하세요.

이 중요한 알림 메시지를 성공적으로 읽으셨습니다. 이 텍스트는 이러한 유형의 레이아웃에서 간격이 어떻게 작동하는지 보여주기 위해 의도적으로 약간 더 길게 작성되었습니다.

콘텐츠를 깔끔하고 체계적으로 유지하려면 여백 유틸리티를 사용하세요.

이 알림 메시지는 알림 내에서 콘텐츠 간격을 보여주기 위해 더 긴 메시지와 함께 추가 정보를 제공합니다.

구조와 명확성을 유지하려면 간격 클래스를 현명하게 적용하세요.

방금 프라이머리 알림 메시지를 모두 읽으셨습니다. 긴 텍스트는 레이아웃이 콘텐츠 간격을 얼마나 잘 처리하는지 보여주는 데 도움이 됩니다.

하단 테두리가 있는 다크 알림!

점선 테두리가 있는 성공 알림!

두꺼운 테두리가 있는 위험 알림!

커스텀 닫기 버튼이 있는 경고 알림!

커스텀 아이콘이 있는 정보 알림!

방금 프라이머리 알림 메시지를 모두 읽으셨습니다. 긴 텍스트는 레이아웃이 콘텐츠 간격을 얼마나 잘 처리하는지 보여주는 데 도움이 됩니다.

알림 닫기 기능이 있는 프라이머리 알림입니다!