Components

Action Button

사용자가 특정 액션을 실행할 수 있도록 도와주는 컴포넌트입니다.

Action Chip

Action Sheet

Alert Dialog

사용자의 주의가 필요한 중요한 정보를 전달하거나 확인을 요청하는 모달 컴포넌트입니다. 삭제 확인과 같은 중요한 의사결정이 필요할 때 사용됩니다.

Avatar

사용자 프로필 이미지나 아이콘을 원형으로 표시하는 컴포넌트입니다. 사용자를 시각적으로 식별하고 개인화된 경험을 제공할 때 사용됩니다.

Badge

Badge는 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.

Bottom Sheet

화면 하단에서 올라오는 모달 컴포넌트입니다. 추가 정보나 액션 목록을 제공하면서도 현재 컨텍스트를 유지할 때 사용됩니다.

Callout

사용자의 주목을 끌어 중요한 정보를 강조하는 컴포넌트입니다.

Checkbox

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.

Chip

Chip은 사용자가 특정 액션 혹은 선택, 필터링, 전환과 같은 제어 작업을 수행할 수 있도록 돕는 Pill 형태의 컴포넌트입니다.

Chip Tabs

Chip 형태로 표현된 탭 컴포넌트입니다. 카테고리나 필터를 선택하여 콘텐츠를 전환할 때 사용됩니다.

Control Chip

Error State

사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.

Extended Action Sheet

Extended FAB

FAB

Help Bubble

Help Bubble은 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 부가적인 도움말 컴포넌트입니다.

Inline Banner

Link Content

Manner Temp

Manner Temp는 당근의 매너 온도를 시각적으로 표현하는 컴포넌트입니다. 사용자의 신뢰도와 거래 매너를 직관적으로 보여줄 때 사용됩니다.

Manner Temp Badge

매너 온도를 배지 형태로 표현하는 컴포넌트입니다. 콤팩트한 공간에서 사용자의 매너 온도 레벨을 간단히 표시할 때 사용됩니다.

Menu Sheet

Notification Badge

Notification Badge는 사용자에게 읽지 않은 알림이나 상태 변경 정보를 시각적으로 전달하기 위해 사용됩니다.

Page Banner

페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.

Progress Circle

작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.

Reaction Button

사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.

Segmented Control

서로 배타적인 옵션 중 하나를 선택할 수 있게 해주는 컴포넌트입니다. 2-5개의 밀접하게 관련된 선택지를 제공할 때 사용됩니다.

Select Box

드롭다운 목록에서 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 제한된 공간에서 많은 선택지를 효율적으로 제공할 때 사용됩니다.

Skeleton

Snackbar

Snackbar는 사용자 액션의 결과나 프로세스의 결과를 알려주는 일시적인 알림 요소입니다. 화면 하단에 표시되며 자동으로 사라집니다.

Switch

Switch는 사용자가 개별 옵션을 켜거나 끌 수 있게 해주는 컴포넌트입니다. 일반적으로 특정 설정을 활성화하거나 비활성화하는 데 사용됩니다.

Tabs

관련된 콘텐츠 그룹을 구분하고 전환할 수 있게 해주는 컴포넌트입니다. 사용자가 같은 계층의 서로 다른 콘텐츠 영역을 탐색할 때 사용됩니다.

Text Field

사용자가 텍스트를 입력할 수 있는 컴포넌트입니다. 레이블, 도움말 텍스트, 에러 메시지 등을 포함하여 다양한 폼 입력 상황에 사용됩니다.

Toggle Button

사용자가 특정 상태를 켜거나 끌 수 있게 해주는 버튼 형태의 컴포넌트입니다. 필터링이나 뷰 전환과 같은 즉각적인 상태 변경에 사용됩니다.

Top Navigation

페이지 상단에 위치한 네비게이션 컴포넌트입니다. 페이지 제목, 뒤로가기, 액션 버튼 등을 포함하여 앱의 주요 네비게이션을 제공합니다.