Snack Bar
스낵바(Snackbar)는 피드백 컴포넌트입니다. 화면 우측 하단 고정된 위치에 노출합니다. 코드잇에서는 주로 사용자 의견을 수집할 때 활용합니다.

Snack Bar
스낵바(Snackbar)는 피드백 컴포넌트입니다. 화면 우측 하단 고정된 위치에 노출합니다. 코드잇에서는 주로 사용자 의견을 수집할 때 활용합니다.

Snack Bar
스낵바(Snackbar)는 피드백 컴포넌트입니다. 화면 우측 하단 고정된 위치에 노출합니다. 코드잇에서는 주로 사용자 의견을 수집할 때 활용합니다.

Anatomy

ESSENTIAL
1. 아이콘
메시지의 성격(안내, 확인, 완료 등)을 시각적으로 표현하는 요소입니다.
2. 타이틀
사용자에게 전달할 핵심 메시지입니다. 간결한 문장으로 작성하며, Bold 스타일로 강조합니다.
3. 디스크립션
제목을 보완하는 설명문으로 부가 정보를 제공합니다. 한 문단 이내로 구성하며, 본문 폰트 크기를 사용합니다.
4. 닫기 버튼
사용자가 Snack Bar을 닫을 수 있는 버튼입니다. 헤더의 우측 상단에 위치하며, 명시적 종료 기능을 제공합니다.
5. 프라이머리 버튼
사용자의 주요 행동을 유도하는 버튼입니다.(ex. “의견 남기기”, “참여하기”, “확인하기” 등)
Anatomy

ESSENTIAL
1. 아이콘
메시지의 성격(안내, 확인, 완료 등)을 시각적으로 표현하는 요소입니다.
2. 타이틀
사용자에게 전달할 핵심 메시지입니다. 간결한 문장으로 작성하며, Bold 스타일로 강조합니다.
3. 디스크립션
제목을 보완하는 설명문으로 부가 정보를 제공합니다. 한 문단 이내로 구성하며, 본문 폰트 크기를 사용합니다.
4. 닫기 버튼
사용자가 Snack Bar을 닫을 수 있는 버튼입니다. 헤더의 우측 상단에 위치하며, 명시적 종료 기능을 제공합니다.
5. 프라이머리 버튼
사용자의 주요 행동을 유도하는 버튼입니다.(ex. “의견 남기기”, “참여하기”, “확인하기” 등)
Anatomy

ESSENTIAL
1. 아이콘
메시지의 성격(안내, 확인, 완료 등)을 시각적으로 표현하는 요소입니다.
2. 타이틀
사용자에게 전달할 핵심 메시지입니다. 간결한 문장으로 작성하며, Bold 스타일로 강조합니다.
3. 디스크립션
제목을 보완하는 설명문으로 부가 정보를 제공합니다. 한 문단 이내로 구성하며, 본문 폰트 크기를 사용합니다.
4. 닫기 버튼
사용자가 Snack Bar을 닫을 수 있는 버튼입니다. 헤더의 우측 상단에 위치하며, 명시적 종료 기능을 제공합니다.
5. 프라이머리 버튼
사용자의 주요 행동을 유도하는 버튼입니다.(ex. “의견 남기기”, “참여하기”, “확인하기” 등)
State
Properties
size | L, S |
Properties
size | L, S |
Properties
size | L, S |
Spec
![]() | Position768px 이상에서 Bottom : 4rem/ |
![]() | BehaviorClose 버튼을 수동으로 클릭 시 닫힙니다. |
Spec

Position
768px 이상에서 Bottom : 4rem/ Right: 2.8rem에 위치합니다.

Behavior
Close 버튼을 수동으로 클릭 시 닫힙니다.
Spec
![]() | Position768px 이상에서 Bottom : 4rem/ |
![]() | BehaviorClose 버튼을 수동으로 클릭 시 닫힙니다. |
Usage

Do
정보 아이콘은 icon/complete만 사용합니다.
Usage

Do
정보 아이콘은 icon/complete만 사용합니다.
Usage

Do
정보 아이콘은 icon/complete만 사용합니다.
©Codeit
Contact Us
©Codeit
Contact Us
©Codeit
Contact Us