Toast
Toast
Toast
Toast 컴포넌트는 사용자 작업에 의한 시스템 변경 사항을 즉각적으로 알려주는 컴포넌트입니다. SnackBar 컴포넌트와 달리 작업 완료, 상태 변화 등에 대해 2-3초간의 짧은 시간 동안 피드백을 제공하고 사라집니다.
Toast
Toast 컴포넌트는 사용자 작업에 의한 시스템 변경 사항을 즉각적으로 알려주는 컴포넌트입니다. SnackBar 컴포넌트와 달리 작업 완료, 상태 변화 등에 대해 2-3초간의 짧은 시간 동안 피드백을 제공하고 사라집니다.
Toast
Toast 컴포넌트는 사용자 작업에 의한 시스템 변경 사항을 즉각적으로 알려주는 컴포넌트입니다. SnackBar 컴포넌트와 달리 작업 완료, 상태 변화 등에 대해 2-3초간의 짧은 시간 동안 피드백을 제공하고 사라집니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다. 텍스트를 읽지 않아도 성공, 실패, 경고 등의 상태를 빠르게 구분할 수 있게 합니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다. 동작의 결과가 분명히 드러나는 짧은 문장을 사용합니다. (예: “레슨을 완료했어요”, “저장되었습니다”)
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 라이트 박스
Toast 메시지에서 주목해야 할 보조 정보를 시각적으로 강조하는 영역입니다. 리워드 지급이나 수치 변화 등 사용자에게 긍정적인 피드백이나 상태 정보를 명확히 전달할 때 사용할 수 있습니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다. 텍스트를 읽지 않아도 성공, 실패, 경고 등의 상태를 빠르게 구분할 수 있게 합니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다. 동작의 결과가 분명히 드러나는 짧은 문장을 사용합니다. (예: “레슨을 완료했어요”, “저장되었습니다”)
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 라이트 박스
Toast 메시지에서 주목해야 할 보조 정보를 시각적으로 강조하는 영역입니다. 리워드 지급이나 수치 변화 등 사용자에게 긍정적인 피드백이나 상태 정보를 명확히 전달할 때 사용할 수 있습니다.
Anatomy
ESSENTIAL
1. 상태 아이콘
사용자 작업의 결과 상태(성공, 실패 등)를 시각적으로 전달하는 아이콘입니다. 텍스트를 읽지 않아도 성공, 실패, 경고 등의 상태를 빠르게 구분할 수 있게 합니다.
2. 레이블
주요 메시지를 전달하는 텍스트로, 사용자에게 어떤 작업이 완료되었는지 전달합니다. 동작의 결과가 분명히 드러나는 짧은 문장을 사용합니다. (예: “레슨을 완료했어요”, “저장되었습니다”)
OPTIONAL
3. 디스크립션
레이블을 보완하는 부가 설명으로, 추가적인 정보나 안내 문구가 필요한 경우 사용됩니다.
4. 라이트 박스
Toast 메시지에서 주목해야 할 보조 정보를 시각적으로 강조하는 영역입니다. 리워드 지급이나 수치 변화 등 사용자에게 긍정적인 피드백이나 상태 정보를 명확히 전달할 때 사용할 수 있습니다.
State
State
State
Properties
Right box | false, true |
Description | false, true |
Size | L, S |
Properties
Right box | false, true |
Description | false, true |
Size | L, S |
Properties
Right box | false, true |
Description | false, true |
Size | L, S |
Spec
 | Position: Top-centerTop: 94px(PC) / 68px(TB-MO) |
 | Position: Bottom-rightBottom: 24px(PC) / 16px(TB-MO) |
Spec
Position: Top-center
Top: 94px(PC) / 68px(TB-MO)
Position: Bottom-right
Bottom: 24px(PC) / 16px(TB-MO)
Right 32px(PC) / 24px(TB-MO)
Spec
| Position: Top-centerTop: 94px(PC) / 68px(TB-MO) |
| Position: Bottom-rightBottom: 24px(PC) / 16px(TB-MO) |
Usage
Do
문장은 짧고 간결하게 작성하고 약 2-3초의 충분한 노출 시간을 보장합니다.
Do
3가지 역할 안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 약 2-3초의 충분한 노출 시간을 보장합니다.
Do
3가지 역할 안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)
Usage
Do
문장은 짧고 간결하게 작성하고 약 2-3초의 충분한 노출 시간을 보장합니다.
Do
3가지 역할 안에서 맞는 타입을 사용합니다.
Don't
동일한 액션에 대해 Toast를 중복 노출하지 않습니다.
Don't
중요한 결정을 Toast로 전달하지 않습니다.(ex. 결제 하시겠어요?)