KRDS 컴포넌트 갤러리
한국정부디자인시스템(KRDS)의 80개 UI 컴포넌트를 확인하고 활용해보세요.
기본 버튼
KRDS 기본 버튼 컴포넌트입니다.
버튼 계층구조
버튼의 중요도에 따른 계층 구조를 표현합니다.
아이콘 버튼
아이콘만 포함된 버튼 컴포넌트입니다.
버튼 크기
다양한 크기의 버튼을 제공합니다.
텍스트 버튼
텍스트만 포함된 스타일 버튼입니다.
아이콘 포함 버튼
텍스트와 아이콘을 함께 사용하는 버튼입니다.
텍스트 입력
기본 텍스트 입력 필드입니다.
아이콘 텍스트 입력
아이콘이 포함된 텍스트 입력 필드입니다.
텍스트 입력 크기
다양한 크기의 텍스트 입력 필드입니다.
텍스트 입력 상태
다양한 상태의 텍스트 입력 필드입니다.
텍스트영역
여러 줄 텍스트 입력 필드입니다.
셀렉트
드롭다운 선택 필드입니다.
셀렉트 크기
다양한 크기의 셀렉트 필드입니다.
셀렉트 정렬
정렬용 셀렉트 컴포넌트입니다.
셀렉트 상태
다양한 상태의 셀렉트 필드입니다.
체크박스
기본 체크박스 컴포넌트입니다.
칩 체크박스
칩 스타일의 체크박스입니다.
체크박스 크기
다양한 크기의 체크박스입니다.
라디오 버튼
기본 라디오 버튼 컴포넌트입니다.
칩 라디오
칩 스타일의 라디오 버튼입니다.
라디오 크기
다양한 크기의 라디오 버튼입니다.
파일 업로드
파일 업로드 컴포넌트입니다.
날짜 입력
날짜 선택 입력 필드입니다.
헤더
사이트 상단 헤더 영역입니다.
푸터
사이트 하단 푸터 영역입니다.
메인메뉴(PC)
데스크탑용 메인 메뉴입니다.
메인메뉴(모바일)
모바일용 메인 메뉴입니다.
사이드 내비게이션
사이드바 내비게이션 메뉴입니다.
인페이지 내비게이션
페이지 내 앵커 내비게이션입니다.
브레드크럼
페이지 경로 표시 컴포넌트입니다.
페이지네이션
페이지 번호 내비게이션입니다.
스킵 링크
접근성을 위한 스킵 링크입니다.
아코디언
접힘/펼침 패널 컴포넌트입니다.
라인 아코디언
라인 스타일의 아코디언입니다.
배지
상태 표시 배지 컴포넌트입니다.
숫자 배지
숫자를 표시하는 배지입니다.
배지 크기
다양한 크기의 배지입니다.
태그
콘텐츠 분류용 태그 컴포넌트입니다.
링크 태그
클릭 가능한 링크 태그입니다.
툴팁
기본 툴팁 컴포넌트입니다.
박스 툴팁
박스 형태의 툴팁입니다.
세로 툴팁
세로 방향 툴팁입니다.
캐러셀
콘텐츠 슬라이드 컴포넌트입니다.
배너 캐러셀
배너용 캐러셀 컴포넌트입니다.
테이블
데이터 테이블 컴포넌트입니다.
구조화 목록
키-값 쌍의 목록 컴포넌트입니다.
구조화 목록 테이블
테이블 형태의 구조화 목록입니다.
모달
기본 모달 다이얼로그입니다.
모달 샘플
다양한 모달 예제입니다.
스피너
로딩 표시 스피너입니다.
단계 표시기
프로세스 단계를 표시합니다.
중요 알림
중요 알림 메시지 컴포넌트입니다.
코치 마크
사용자 가이드 코치 마크입니다.
맥락 도움말
상황별 도움말 컴포넌트입니다.
도움말 패널
사이드 도움말 패널입니다.
튜토리얼 패널
튜토리얼 안내 패널입니다.
캘린더
날짜 선택 캘린더입니다.
기간 캘린더
기간 선택용 캘린더입니다.
디스클로저
콘텐츠 펼침/접힘 컴포넌트입니다.
크기 조절
텍스트 크기 조절 컴포넌트입니다.
언어 전환
언어 선택 전환기입니다.
언어 전환(페이지)
페이지용 언어 전환기입니다.
토글 스위치
온/오프 토글 스위치입니다.
토글 스위치 크기
다양한 크기의 토글 스위치입니다.
TTS
텍스트 음성 변환 컴포넌트입니다.
TTS 아이콘
TTS 아이콘 버튼입니다.
TTS 크기
다양한 크기의 TTS 버튼입니다.
탭
콘텐츠 탭 컴포넌트입니다.
텍스트 목록
일반 텍스트 목록입니다.
순서 목록
순서가 있는 목록입니다.
파비콘
사이트 파비콘 예제입니다.
식별자
정부 식별자 표시 컴포넌트입니다.
마스트헤드
정부 사이트 마스트헤드입니다.