Button
사용자가 즉시 실행할 행동을 담는 버튼.
컴포넌트 둘러보기
목적별로 정리된 컴포넌트와 바로 복사할 수 있는 실행 예제를 확인하세요.
Action 8
Data Input 30
ButtonRadioGroup
버튼 형태로 하나만 선택하는 라디오 그룹.
Checkbox
하나 이상의 항목을 선택·해제하는 체크박스.
CheckboxGroup
여러 항목을 함께 선택하는 체크박스 그룹.
Chip
짧은 텍스트나 상태·분류를 작게 담는 칩.
Combobox
키워드를 입력해 결과를 빠르게 찾는 검색 입력.
DateCalendar
인라인 일자 선택 캘린더.
DatePicker
단일 일자를 캘린더에서 고르는 날짜 입력.
DateRangeCalendar
인라인 기간 선택 캘린더.
DateRangePicker
시작일과 종료일 기간을 캘린더 그리드로 선택하는 입력 컴포넌트.
Form
폼 아이템 하나를 감싸며 라벨·설명·도움말을 배치하는 컨테이너.
FileField
폼 필드 상태에 연결해 파일을 입력받는 필드.
GhostTextField
투명 배경과 얇은 윤곽선으로만 입력 영역을 나타내는 텍스트 필드.
Input
한 줄 텍스트를 입력받는 필드.
Menu
화면 위에 겹쳐 띄우는 명령 목록.
Radio
하나의 선택지를 나타내는 라디오.
RadioBox
박스 형태로 하나만 선택하는 라디오.
RadioCard
카드 형태로 하나만 선택하는 라디오.
RadioGroup
여러 라디오를 묶어 하나만 선택하게 하는 그룹.
RatingGroup
별점을 입력받는 평점 그룹.
Select
정해진 옵션 목록에서 값을 선택하는 셀렉트.
TagsInput
여러 태그를 입력하고 관리하는 입력 필드.
TextArea
여러 줄 텍스트를 입력받는 필드.
TimeFieldBase
시간 입력과 시·분·오전/오후 선택 패널을 결합한 시간 필드.
TimePicker
시·분과 오전/오후를 고르는 휠 피커.
TimeRangeFieldBase
시작·종료 시간 입력과 선택 패널을 묶은 시간 범위 필드.
TimeRangePicker
시작·종료 시간을 휠 패널로 고르는 시간 범위 선택기.
ToggleSwitch
단일 항목을 즉시 켜고 끄는 토글 스위치.
ColorField
디자인 토큰 스와치와 hex 피커로 색상을 고르는 필드.
OtpInput
input-otp 기반의 비공식 인증번호 입력 컴포넌트.
Slider
최솟값~최댓값 사이에서 단일 값을 선택하는 범용 슬라이더.
Data Display 10
Caption
본문·제목에 곁들이는 메타데이터 캡션.
ExpansionPanel
콘텐츠를 접었다 펴며 상세를 드러내는 확장 패널.
Format
날짜·숫자·기간을 로케일에 맞춰 표시하는 대표 포맷터.
Image
Next.js 이미지 최적화를 감싼 이미지 컴포넌트.
ImageZoom
이미지를 확대해 세부 내용을 살펴보고 이동할 수 있는 뷰어.
StyledQrCode
문자열을 담아 그려 주는 QR 코드.
Table
열 정의로 만드는 데이터 표.
CardStack
카드를 겹쳐 쌓고 좌우로 넘기는 스택 컨테이너.
PropertyPanel
Figma Design 패널 스타일의 속성 편집 레이아웃.
VideoPlayer
Video.js 기반의 비공식 통합 동영상 플레이어.
Feedback & Status 20
AuthErrorScreen
접근 권한이 없을 때 띄우는 에러 화면.
Badge
아이콘·아바타 우상단에 점이나 숫자를 얹는 배지.
CalloutBox
본문 흐름 안에 놓는 인라인 안내 박스.
CircularProgress
완료량을 알 수 없는 대기를 원형 애니메이션으로 나타내는 인디케이터.
ErrorScreen
에러 유형에 맞는 화면을 띄우는 에러 스크린.
ErrorState
아이콘·메시지·링크로 에러 상태를 알리는 박스.
HoverCard
호버하거나 포커스하면 부가 정보를 띄우는 패널.
Indicator
캐러셀·배너의 현재 위치나 진행 단계를 점으로 보여주는 표식.
LinearProgress
작업 진행 정도를 가로 막대 길이로 나타내는 인디케이터.
NotFoundErrorScreen
페이지를 찾지 못했을 때 띄우는 에러 화면.
Popover
트리거 자리에서 짧은 정보나 설정을 띄우는 작은 패널.
ProgressBar
완료 비율을 가로 막대와 값으로 나타내는 진행 표시줄.
ProgressCircle
완료 비율을 좁은 공간의 원형 트랙으로 나타내는 진행 인디케이터.
ResponsivePopover
화면 크기에 따라 Popover나 Dialog로 여는 반응형 오버레이.
Scrim
콘텐츠 위에 덧씌우는 오버레이.
Skeleton
로딩 중 콘텐츠 자리를 회색 도형으로 대신하는 플레이스홀더.
Spinner
로딩 상태를 나타내는 스피너.
Timer
시간을 표시하는 타이머.
Toast
즉시 알려야 할 상태·결과를 짧게 전달하는 알림.
Tooltip
호버하거나 포커스하면 잠깐 나타나는 짧은 설명.
Navigation 10
Avatar
사용자나 대상을 나타내는 아바타.
AvatarGroup
여러 아바타를 겹쳐 표시하는 그룹 컨테이너.
BoxTab
드래그로 순서를 바꿀 수 있는 박스형 탭.
Breadcrumb
현재 위치와 상위 경로를 나타내는 이동 경로.
Header
페이지 제목과 앞·뒤 행동을 일관된 높이와 정렬로 배치하는 상단 헤더.
Pagination
여러 페이지로 나뉜 목록을 탐색하는 페이지네이션.
Sidebar
현재 위치와 관련 메뉴를 계층으로 모은 측면 내비게이션.
Sticker
색 배경 위에 아이콘을 얹는 장식 배지.
Tabs
여러 콘텐츠 뷰 사이를 전환하는 탭.
Tree
드래그 정렬과 가상화를 지원하는 트리.
Overlay 3
Layout 14
BottomSheet
화면 아래에서 올라오는 시트.
Carousel
여러 항목을 좌우로 넘겨 보는 캐러셀.
Drawer
본문 위에 겹쳐 여는 임시 패널.
ErrorPage
에러 유형에 맞는 그래픽과 문구를 담는 에러 페이지.
IFrame
외부 문서나 독립 화면을 경계가 있는 프레임 안에 삽입하는 컴포넌트.
LoadMore
스크롤 끝에서 다음 목록을 이어 불러오는 무한 스크롤.
Marquee
텍스트·이미지·카드를 무한히 흐르게 하는 컴포넌트.
Resizable
인접한 두 영역의 경계를 드래그해 크기를 조절하는 컨테이너.
SidePanel
본문과 공간을 나눠 쓰는 측면 패널.
AdminPageCard
관리자 화면의 본문을 카드 표면으로 감싸는 레이아웃 컨테이너.
BrowserFrame
탭·주소창을 포함한 브라우저형 미리보기 프레임.
Kanban
열 간 드래그 앤 드롭으로 카드를 옮기는 비공식 칸반 보드.
SplitView
탭을 드래그해 화면을 분할하는 에디터형 패널 레이아웃.
Thread
메시지 목록과 입력창을 담는 채팅 스레드 컨테이너.