Components · 공식 목록

요소로 찾기

이름을 몰라도 모양과 목적에서 시작할 수 있습니다. 카드를 누르면 용도와 비슷한 요소를 확인할 수 있습니다.

52개 등록 · 12개 분류

52개 항목 · 공식 이름, 한글 별칭, 용도로 검색

아코디언실행 예제

Accordion

내용을 접었다 펼치는 묶음입니다.

내용 펼치기 · 펼치기 · 접기

안내문실행 예제

Alert

화면 안에 계속 남는 정보나 주의 메시지입니다.

상태 알리기 · 알림 · 주의

중요 작업 확인목록 등록

Alert Dialog

삭제처럼 중요한 작업을 확인합니다.

창·확인 · 삭제 확인 · 확인 팝업

프로필 이미지목록 등록

Avatar

사람이나 계정을 나타내는 이미지입니다.

데이터 표시 · 사용자 이미지 · 프로필

상태 배지목록 등록

Badge

상태나 분류를 짧게 표시합니다.

데이터 표시 · 태그 · 라벨

현재 위치 경로목록 등록

Breadcrumb

사이트 안에서 현재 위치를 보여줍니다.

메뉴·이동 · 경로 · 현재 위치

버튼실행 예제

Button

작업을 실행하거나 다음 단계로 이동합니다.

누르고 선택 · 누르기 · 실행

버튼 그룹목록 등록

Button Group

관련 작업 버튼을 하나의 묶음으로 보여줍니다.

누르고 선택 · 버튼 묶음

달력목록 등록

Calendar

날짜를 달력에서 확인하고 선택합니다.

날짜 고르기 · 날짜 · 달력

카드목록 등록

Card

관련 내용을 하나의 시각적 영역으로 묶습니다.

내용 배치 · 패널 · 콘텐츠 카드

캐러셀목록 등록

Carousel

여러 콘텐츠를 넘겨서 보여줍니다.

내용 배치 · 슬라이더 · 넘기기

차트목록 등록

Chart

데이터의 비교·추세·구성비를 시각화합니다.

데이터 표시 · 그래프 · 통계

여러 항목 선택실행 예제

Checkbox

여러 항목을 독립적으로 선택합니다.

누르고 선택 · 체크 · 동의

접이식 영역목록 등록

Collapsible

하나의 영역을 열고 닫습니다.

내용 배치 · 접기 · 펼치기

검색하며 선택실행 예제

Combobox

검색과 선택을 한 입력에서 처리합니다.

입력·폼 · 검색 선택 · 검색되는 목록

명령 검색목록 등록

Command

키보드로 기능과 페이지를 빠르게 찾습니다.

메뉴·이동 · 커맨드 메뉴 · 빠른 검색

상황 메뉴목록 등록

Context Menu

특정 대상의 추가 작업을 보여줍니다.

메뉴·이동 · 우클릭 메뉴

검색·정렬 목록목록 등록

Data Table

검색·정렬·페이지 이동이 가능한 표 조합입니다.

데이터 표시 · 데이터 테이블 · 목록

날짜 선택목록 등록

Date Picker

입력이나 달력으로 날짜를 선택합니다.

날짜 고르기 · 날짜 입력

대화상자실행 예제

Dialog

현재 화면 위에서 짧은 작업이나 정보를 보여줍니다.

창·추가 내용 · 팝업 · 대화 창

밀어서 여는 패널목록 등록

Drawer

가장자리에서 열리고 닫히는 패널입니다.

창·추가 내용 · 슬라이드 패널 · 밀어 열기

작업 메뉴실행 예제

Dropdown Menu

버튼 아래에 수정·복사·삭제 같은 작업을 보여줍니다.

메뉴·이동 · 점 세 개 메뉴 · 드롭다운

빈 상태목록 등록

Empty

표시할 데이터가 없을 때 다음 행동을 안내합니다.

상태·진행 · 데이터 없음 · 빈 화면

폼 필드목록 등록

Field

라벨·입력·도움말·오류를 하나의 필드로 묶습니다.

입력·폼 · 폼 · 입력 영역

미리보기 카드목록 등록

Hover Card

대상을 가리킬 때 추가 정보를 미리 보여줍니다.

창·추가 내용 · 미리보기 · 호버 카드

한 줄 입력실행 예제

Input

짧은 텍스트나 값을 입력합니다.

입력·폼 · 텍스트 입력 · 검색창

인증번호 입력목록 등록

Input OTP

인증번호를 칸별로 입력합니다.

입력·폼 · OTP · 인증 코드

입력 라벨목록 등록

Label

입력 항목의 이름과 목적을 알려줍니다.

입력·폼 · 필드 이름

메뉴 모음목록 등록

Menubar

상위 메뉴와 하위 메뉴를 가로로 보여줍니다.

메뉴·이동 · 상단 메뉴

탐색 메뉴목록 등록

Navigation Menu

서비스의 주요 영역을 탐색합니다.

메뉴·이동 · 내비게이션

페이지 이동목록 등록

Pagination

긴 목록을 여러 페이지로 나눕니다.

메뉴·이동 · 페이지네이션

작은 추가 창목록 등록

Popover

버튼 주변에 추가 내용이나 설정을 보여줍니다.

창·추가 내용 · 작은 팝업 · 추가 정보

진행률목록 등록

Progress

측정 가능한 작업의 진행 정도를 표시합니다.

상태·진행 · 진행 바 · 진행 상태

하나 선택목록 등록

Radio Group

여러 선택지 중 하나를 선택합니다.

누르고 선택 · 라디오 · 단일 선택

크기 조절 영역목록 등록

Resizable

사용자가 영역의 크기를 조절합니다.

내용 배치 · 패널 크기

스크롤 영역목록 등록

Scroll Area

내용이 많은 영역을 독립적으로 스크롤합니다.

내용 배치 · 스크롤

목록 선택실행 예제

Select

정해진 선택지 중 하나를 고릅니다.

입력·폼 · 선택창 · 드롭다운 선택

구분선목록 등록

Separator

내용과 영역을 시각적으로 나눕니다.

내용 배치 · 선 · 디바이더

옆에서 열리는 패널실행 예제

Sheet

현재 화면을 유지하면서 상세 내용을 보여줍니다.

창·추가 내용 · 오른쪽 패널 · 상세 창

왼쪽 탐색 메뉴목록 등록

Sidebar

서비스의 주요 영역을 왼쪽에서 탐색합니다.

메뉴·이동 · 사이드바 · 좌측 메뉴

콘텐츠 모양 로딩목록 등록

Skeleton

콘텐츠가 나타날 위치를 먼저 보여주는 로딩입니다.

상태·진행 · 로딩 뼈대 · 스켈레톤

범위 조절목록 등록

Slider

범위 안의 값을 밀어서 조절합니다.

입력·폼 · 범위 입력

처리 중 표시목록 등록

Spinner

작업이 진행 중임을 회전 아이콘으로 표시합니다.

상태·진행 · 로딩 아이콘

켜기·끄기실행 예제

Switch

설정의 켜짐과 꺼짐을 전환합니다.

누르고 선택 · 토글 스위치 · 설정

기본 표목록 등록

Table

행과 열로 데이터를 보여줍니다.

데이터 표시 · 표

탭 전환실행 예제

Tabs

같은 영역의 콘텐츠를 탭으로 전환합니다.

메뉴·이동 · 탭 메뉴

여러 줄 입력목록 등록

Textarea

긴 텍스트나 설명을 여러 줄로 입력합니다.

입력·폼 · 본문 입력

잠깐 나타나는 알림목록 등록

Toast

작업 결과를 잠깐 알려줍니다.

상태·진행 · 저장 알림 · 성공 메시지

상태 유지 버튼목록 등록

Toggle

눌린 상태를 유지하는 도구 버튼입니다.

누르고 선택 · 토글 버튼

토글 그룹목록 등록

Toggle Group

여러 도구 버튼의 선택 상태를 묶습니다.

누르고 선택 · 도구 모음

짧은 도움말목록 등록

Tooltip

아이콘이나 버튼의 짧은 설명을 보여줍니다.

창·추가 내용 · 도움말 · 툴팁

글자 구성목록 등록

Typography

제목·본문·목록 등의 글자 계층을 정합니다.

글자·보조 · 타이포그래피 · 문서