Capsule Button

GUIDE

Capsule button은 새로운 콘텐츠가 있을 때 해당 스크롤 위치로 이동시켜주는 버튼입니다. 
버튼을 눌러 원하는 위치로 화면 이동을 완료하면 사라집니다.

• 콘텐츠 영역이 세로 스크롤 되는 서비스에서 사용합니다.

• top 캡슐 버튼 클릭 시 해당 콘텐츠의 최상단으로 스크롤되며, 스크롤 직후 캡슐 버튼은 사라집니다.

• 캡슐 버튼에 해당하는 콘텐츠에 사용자가 직접 스크롤하여 도달하는 경우 캡슐 버튼은 사라집니다.
  
  

---

ANATOMY

• 1. Icon area

  버튼의 기능을 나타내는 아이콘이 배치됩니다.

• 2. Button Background

  색상은 화면 맥락 및 톤앤 매너에 따라 달라질 수 있으며, 컨텐츠를 너무 가리지 않기 위해 투명도를 사용합니다.

• 3. Shadow

  기본 화면(배경)과 레이어 중첩으로 인한 혼란을 줄이기 위해 함께 사용됩니다.

---

STATES

Capsule button의 상태별 정의는 다음과 같습니다.

---

PLACEMENT & INTERACTION

To the above contents
화살표가 위로 향하는 Top capsule button을 누르면 해당 페이지의 최상단 영역으로 스크롤됩니다.

• 스크롤 직후 capsule button은 사라집니다.

• capsule button에 해당하는 콘텐츠에 사용자가 직접 스크롤하여 도달하는 경우 capsule button은 사라집니다.

Fixed position

• 우측 패딩 : 16px

• 하단 패딩 : 24px