# SEED Components - LLM Reference

컴포넌트 디자인 스펙 (Anatomy, Properties, Guidelines)

## Components

- [Accordion](https://seed-design.io/llms/components/accordion.txt): 세부 정보를 점진적으로 공개할 수 있는, 수직으로 쌓인 목록 컴포넌트입니다.
- [Action Button](https://seed-design.io/llms/components/action-button.txt): 명확한 액션을 쉽게 수행할 수 있도록 돕는 기본 인터랙션 컴포넌트입니다.
- [Action Chip](https://seed-design.io/llms/components/action-chip.txt) (Deprecated)
- [Action Sheet](https://seed-design.io/llms/components/action-sheet.txt) (Deprecated)
- [Alert Dialog](https://seed-design.io/llms/components/alert-dialog.txt): 사용자의 확인이 반드시 필요한 경우 강력한 표현 및 경고 수단으로 활용하는 컴포넌트입니다.
- [Attachment Input](https://seed-design.io/llms/components/attachment-input.txt): 사진, 영상, 파일 첨부를 다루는 입력으로, 선택, 업로드, 진행률, 실패, 삭제 상태를 관리합니다.
- [Avatar](https://seed-design.io/llms/components/avatar.txt): 사용자의 프로필 이미지를 표시하는 컴포넌트입니다.
- [Badge](https://seed-design.io/llms/components/badge.txt): 객체의 속성이나 상태를 시각적으로 표현하는 작은 텍스트 라벨입니다. 사용자의 주의를 끌고 콘텐츠의 빠른 인지와 탐색을 돕기 위해 사용됩니다.
- [Bottom Navigation](https://seed-design.io/llms/components/bottom-navigation.txt): 앱의 루트 페이지 하단에 고정되어 있는 네비게이션 바로, 다섯 개의 상위 탭 간 이동을 제공합니다.
- [Bottom Sheet](https://seed-design.io/llms/components/bottom-sheet.txt): 화면 하단에서 올라오는 모달 컴포넌트입니다. 추가 정보나 액션 목록을 제공하면서도 현재 컨텍스트를 유지할 때 사용됩니다.
- [Callout](https://seed-design.io/llms/components/callout.txt): 사용자에게 중요한 정보나 팁을 시각적으로 강조하여 전달하는 메시지 컴포넌트입니다.
- [Checkbox](https://seed-design.io/llms/components/checkbox.txt): 사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.
- [Chip](https://seed-design.io/llms/components/chip.txt): 사용자가 선택하거나 입력하는 값을 표시하는 컴포넌트입니다.
- [Content Placeholder](https://seed-design.io/llms/components/content-placeholder.txt): 이미지나 콘텐츠가 로드되지 않았을 때, 해당 영역의 성격을 전달하는 대체 시각 요소입니다.
- [Contextual Floating Button](https://seed-design.io/llms/components/contextual-floating-button.txt): 화면 위에 떠 있으며 특정 상황에서만 나타나는 보조적인 동작을 위한 버튼입니다.
- [Control Chip](https://seed-design.io/llms/components/control-chip.txt) (Deprecated)
- [Date Picker](https://seed-design.io/llms/components/date-picker.txt): 캘린더에서 날짜·기간·여러 날짜를 선택할 때 사용하는 컴포넌트입니다.
- [Dialog](https://seed-design.io/llms/components/dialog.txt): 사용자의 흐름을 일시 중지시키고, 중요한 정보를 전달하거나 특정 작업을 완료하도록 강제하는 모달형 컴포넌트입니다.
- [Divider](https://seed-design.io/llms/components/divider.txt): 시각적 구분자로써 역할을 하며, 콘텐츠 간의 구획을 명확히 나누는 데 사용하는 컴포넌트입니다.
- [Error State](https://seed-design.io/llms/components/error-state.txt) (Deprecated): 사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.
- [Extended Action Sheet](https://seed-design.io/llms/components/extended-action-sheet.txt) (Deprecated)
- [Extended FAB](https://seed-design.io/llms/components/extended-fab.txt) (Deprecated)
- [FAB](https://seed-design.io/llms/components/fab.txt) (Deprecated)
- [Field](https://seed-design.io/llms/components/field.txt): 사용자로부터 값을 입력받는 컨테이너 컴포넌트로, 일관된 레이블, 도움말, 오류 표기와 상태 피드백을 제공합니다.
- [Floating Action Button](https://seed-design.io/llms/components/floating-action-button.txt): 화면 상에 떠 있으며 주요 액션을 실행하는 버튼입니다.
- [Footer](https://seed-design.io/llms/components/footer.txt): 사이트 하단에서 법적 정보·정책 링크·서비스 탐색·연락처를 모아 보여주는 영역입니다.
- [Help Bubble](https://seed-design.io/llms/components/help-bubble.txt): 사용자에게 컴포넌트의 상태나 특정 기능에 대한 추가 정보를 제공하는 컴포넌트입니다.
- [Identity Placeholder](https://seed-design.io/llms/components/identity-placeholder.txt): 인물을 표현하는 이미지가 로드되지 않았을 때 보여지는 대체 시각 요소입니다.
- [Image Frame](https://seed-design.io/llms/components/image-frame.txt): 사용자가 업로드한 이미지를 표시하기 위한 컴포넌트입니다.
- [Inline Banner](https://seed-design.io/llms/components/inline-banner.txt) (Deprecated)
- [Input Button](https://seed-design.io/llms/components/input-button.txt): 입력 필드 형태의 버튼으로, 선택창이나 피커를 열 때 사용합니다. 선택이 완료되면 버튼 라벨에 선택된 값이 표시됩니다.
- [Link Content](https://seed-design.io/llms/components/link-content.txt) (Deprecated)
- [List](https://seed-design.io/llms/components/list.txt): 가로 행으로 구성된 콘텐츠를 표현하는 컴포넌트입니다.
- [Manner Temp & Manner Temp Badge](https://seed-design.io/llms/components/manner-temp.txt): 사용자의 매너온도를 시각적으로 표현하는 컴포넌트입니다. 신뢰도/매너 정도를 직관적으로 보여주는 데에 사용합니다.
- [Menu](https://seed-design.io/llms/components/menu.txt): 사용자가 취할 수 있는 선택지나 액션 리스트를 제공하는 컴포넌트입니다.
- [Menu Sheet](https://seed-design.io/llms/components/menu-sheet.txt): 사용자의 작업과 관련된 선택지를 제공하는 시트 형태의 컴포넌트입니다.
- [Notification Badge](https://seed-design.io/llms/components/notification-badge.txt): 아이콘, 버튼, 메뉴 등 UI 요소에 표시되어 새로운 알림이나 읽지 않은 메시지 수를 나타내는 컴포넌트입니다.
- [Page Banner](https://seed-design.io/llms/components/page-banner.txt): 페이지 상단에 위치하며 사용자에게 전체적인 상태나 중요한 메시지를 전달하는 상위 레벨 메시지 컴포넌트입니다.
- [Pagination](https://seed-design.io/llms/components/pagination.txt): 여러 페이지로 나뉜 콘텐츠를 탐색할 수 있도록 돕는 네비게이션 컴포넌트입니다.
- [Progress Circle](https://seed-design.io/llms/components/progress-circle.txt): 작업이 진행 중임을 알리거나 작업 시간을 시각적으로 나타내는 데 사용됩니다.
- [Quantity Picker](https://seed-design.io/llms/components/quantity-picker.txt): 버튼으로 수치 값을 한 단계씩 늘리거나 줄일 수 있는 입력 컴포넌트입니다.
- [Radio](https://seed-design.io/llms/components/radio.txt): 여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트입니다.
- [Reaction Button](https://seed-design.io/llms/components/reaction-button.txt): 사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트입니다. 좋아요, 관심있어요 등의 감정적 피드백을 간편하게 제공할 때 사용됩니다.
- [Result Section](https://seed-design.io/llms/components/result-section.txt): 데이터 로딩 결과, 사용자의 액션 완료 여부 등 사용자에 액션에 대한 결과를 제공하는 템플릿입니다. 주로 전체 화면이나 특정 영역을 차지하여 다음 액션을 유도하거나 현재 상황을 안내하는 역할을 합니다.
- [Scroll Fog](https://seed-design.io/llms/components/scroll-fog.txt): 스크롤 가능한 영역에서 사용자에게 추가 콘텐츠가 있음을 시각적으로 알려주는 힌트 역할을 합니다.
- [Segmented Control](https://seed-design.io/llms/components/segmented-control.txt): 여러 옵션 중 하나를 선택하여 관련 콘텐츠를 즉시 필터링하거나 전환할 때 사용하는 컴포넌트입니다.
- [Select](https://seed-design.io/llms/components/select.txt): 옵션 목록에서 값을 골라 Form에 제출할 때 사용하는 컴포넌트입니다.
- [Select Box](https://seed-design.io/llms/components/select-box.txt): 명확한 테두리를 가진 컨테이너를 활용하여, 정의된 목록 중 하나 이상의 옵션을 선택하는 UI 요소입니다.
- [Side Navigation](https://seed-design.io/llms/components/side-navigation.txt): 서비스의 최상위 메뉴 간 이동을 돕고 앱의 전체 구조를 탐색할 수 있게 하는 컴포넌트입니다.
- [Side Panel](https://seed-design.io/llms/components/side-panel.txt): 화면의 측면에서 슬라이드되어 나타나며, 현재 맥락을 유지한 채 상세 정보를 확인하거나 부수적인 작업을 수행하는 레이아웃 컴포넌트입니다.
- [Skeleton](https://seed-design.io/llms/components/skeleton.txt): 콘텐츠가 로딩되는 동안 이후 나타날 요소의 윤곽을 미리 보여주어 로딩 시간을 짧게 느끼게 하는 UI 요소입니다.
- [Slider](https://seed-design.io/llms/components/slider.txt): 지정된 범위 내에서 하나 또는 두 개의 값을 선택해 입력할 수 있는 컴포넌트입니다.
- [Snackbar](https://seed-design.io/llms/components/snackbar.txt): 화면 하단에 일시적으로 나타나 상태나 결과를 안내하는 컴포넌트입니다.
- [Switch](https://seed-design.io/llms/components/switch.txt): 특정 설정 및 상태를 즉시 켜거나 끌 수 있도록 하는 컴포넌트입니다.
- [Table Pagination](https://seed-design.io/llms/components/table-pagination.txt): 데이터 테이블에서 대량의 데이터를 페이지 단위로 나누고, 페이지 이동과 페이지당 표시 행 수를 제어하는 컴포넌트입니다.
- [Tabs](https://seed-design.io/llms/components/tabs.txt): 한 화면 내에서 콘텐츠를 탭 단위로 구분하여 전환할 수 있는 컴포넌트입니다.
- [Tag Group](https://seed-design.io/llms/components/tag-group.txt): 아이콘과 텍스트 태그를 수평으로 나열해 여러 속성·상태·메타데이터를 한눈에 보여주는 정보 요약 컴포넌트입니다.
- [Text Input & Textarea](https://seed-design.io/llms/components/text-input.txt): 사용자로부터 텍스트를 입력받는 컴포넌트입니다.
- [Time Picker](https://seed-design.io/llms/components/time-picker.txt): 휠을 굴려 시간(오전·오후·시·분)을 선택할 때 사용하는 컴포넌트입니다.
- [Top Navigation](https://seed-design.io/llms/components/top-navigation.txt): 화면 상단에 위치하여 탐색 인터페이스를 제공하는 네비게이션 컴포넌트입니다.
- [Wheel Picker](https://seed-design.io/llms/components/wheel-picker.txt): 여러 값을 세로로 스크롤해 하나 이상의 열에서 선택하는 입력 컴포넌트입니다.

## Related Sections

- [Foundations](https://seed-design.io/foundations/llms.txt): 색상, 타이포그래피 등 디자인 파운데이션
- [React Library](https://seed-design.io/react/llms.txt): React 컴포넌트 구현 및 API 레퍼런스