Button
동작을 실행해요. 한 화면에 primary는 하나만.
Components
화면을 이루는 부품이에요. 모두 Base UI 위에 만들어 키보드와 화면 낭독기를 지원하고, Figma 컴포넌트 속성과 React props 이름이 같아요.
기본
폼
Field
라벨, 설명, 에러를 입력과 연결해요.
Checkbox
여러 개를 고를 때 써요.
RadioGroup
하나만 고를 때 써요.
Switch
누르는 즉시 적용되는 설정이에요.
Select
목록에서 하나 또는 여러 개를 골라요.
FileDropzone
파일을 고르거나 끌어다 놓아요.
오버레이
Dialog
흐름을 잠시 멈추고 입력을 받아요.
AlertDialog
되돌릴 수 없는 동작을 확인해요.
Menu
행이나 카드에 딸린 동작을 묶어요.
Popover
대상 가까이에 짧은 내용을 띄워요.
Tooltip
아이콘 버튼의 이름을 알려 줘요.
탐색·표시
Tabs
같은 대상의 다른 보기를 오가요.
Table
여러 항목의 속성을 비교해요.
DataGrid
정렬, 선택, 고정, 이동이 필요한 목록이에요.
Pagination
긴 목록을 페이지로 나눠요.
ToggleGroup
보는 방식을 바로 바꿔요.
Accordion
긴 내용을 접고 펼쳐요.
피드백·상태
Toast
동작 결과를 잠깐 알려 줘요.
Badge
상태를 짧은 낱말로 표시해요.
Progress
끝이 정해진 작업의 진행률이에요.
Skeleton
로딩 중 자리를 표시해요.
EmptyState
비어 있을 때 다음 행동을 알려 줘요.
ErrorState
실패를 알리고 다시 시도하게 해요.
ErrorPage
404·403·500처럼 페이지 자체를 보여 줄 수 없을 때 화면 전체를 쓰는 에러예요.
FileList
올린 파일과 진행 상태를 보여 줘요.