디자인 컴포넌트

누르면 동작이 실행되는 버튼입니다. 강조 정도에 따라 주요·보조·고스트·위험 네 가지가 있습니다.

제목이나 항목 옆에 상태·이름표를 작게 붙입니다.

관련된 내용을 테두리로 묶어 보여줍니다. 제목은 넣어도 되고 빼도 됩니다.

이름과 값을 한 줄로 보여주는 읽기 전용 항목입니다.

화면 맨 위 제목 줄입니다. 제목·배지·설명과 오른쪽 버튼이 들어갑니다.

한 줄짜리 글·비밀번호·숫자를 입력하는 칸입니다.

여러 선택지 중 하나를 고르는 드롭다운입니다.

여러 줄 글을 입력하는 칸입니다.

라벨·입력칸·도움말을 한 묶음으로 감싼 입력 한 줄입니다.

켜고 끄는 토글입니다. 옆에 설명을 붙일 수 있습니다.

파일을 첨부하는 컴포넌트입니다. 끌어다 놓거나 버튼으로 고르고, 올린 파일 목록과 허용 형식·용량을 함께 보여줍니다.

여러 선택지 중 하나만 고르는 버튼 묶음입니다.

켜고 끄는 선택 상자입니다. 일부만 선택된 '중간' 상태도 나타낼 수 있습니다.

날짜를 고르는 입력칸입니다. 달력에서 고르거나 직접 적을 수 있습니다.

시와 분을 골라 시각을 입력합니다. 24시간·12시간 형식 중 고를 수 있습니다.

대시보드에서 수치 하나를 크게 강조해 보여주는 카드입니다.

게시판형 표입니다. 행 번호·정렬·체크박스 선택을 지원합니다. 데이터가 아주 많으면 데이터 그리드를 쓰세요.

제목을 누르면 내용이 펼쳐지는 목록입니다. FAQ나 안내에 잘 맞습니다. 하나만 또는 여럿을 함께 펼치게 할 수 있습니다.

마우스를 올리거나 포커스하면 뜨는 짧은 도움말입니다.

화면 위에 떠서 제목과 내용을 보여주는 팝업 창입니다.

보여줄 내용이 없을 때 대신 띄우는 안내입니다.

여러 단계 폼에서 지금 어디까지 왔는지 완료·현재·남은 단계로 보여줍니다.

안내·경고·오류·성공을 띠 형태로 알리는 배너입니다. 성격에 따라 색이 달라집니다.