Design Atlas▣UI components
Accordion, toast, skeleton — the exact names and uses of the parts that make up an interface. — 53 entries
Date picker날짜 선택기
A form control that opens a calendar popup on click and fills the field with the date you pick, then closes.
Calendar view캘린더 뷰
A grid laying out a full month of dates, with dots or labels marking which days have events.
Context menu컨텍스트 메뉴
A list of commands scoped to whatever you clicked, opened at the cursor with a right-click or a long press.
Split button스플릿 버튼
A two-part button — the left side runs a default action immediately, the right-side arrow opens a menu of alternatives.
Number input숫자 입력
A field for one numeric value, paired with −/+ buttons that step it by a fixed amount, with direct typing too.
Tag input태그 입력
A field where typing a value and pressing Enter turns it into a removable chip, clearing the field for the next one.
OTP inputOTP 입력
A fixed-length field built to fill a short verification code — usually from a text message — as fast as possible.
Color picker색상 선택기
A control for picking one color from a palette or wheel, built as a swatch grid or handed off to the OS picker.
Rich text toolbar서식 툴바
A row of toggle buttons — bold, italic, underline — that switch formatting on and off for the current selection.
Kanban board칸반 보드
A board of status columns — To do, Doing, Done — where dragging a card between them tracks its progress.
Sortable list정렬 가능한 목록
A vertical list whose items can be reordered by dragging a grip handle.
Virtual list가상 리스트
A technique for long lists that renders only the rows currently in view (plus a small buffer) as real DOM nodes.
Resizable panels크기 조절 패널
A layout split by a draggable divider that lets the user set the ratio between two panes themselves.
Avatar group아바타 그룹
Several users overlapped into a tight horizontal stack, with whatever doesn’t fit rolled into a "+2" count.
Collapsible sidebar접이식 사이드바
A panel that toggles between a full, labeled sidebar and a narrow, icon-only rail.
Menubar메뉴바
A horizontal row of top-level items — File, Edit, View — each opening its own menu of commands below it.
Toolbar툴바
A row of buttons grouped so Tab skips the whole thing and arrow keys move between items inside it.
Sheet (side panel)사이드 시트
An edge-anchored panel that can be modal or non-modal — the term recent design systems use is "sheet."
Accordion아코디언
A vertical list of headers that expand to reveal body content, usually limited to one open panel at a time.
Tabs탭
A row of labeled buttons that switches which single content panel is visible.
Modal모달
A dialog that dims the whole screen and blocks interaction with the page behind it until it is resolved.
Drawer드로어
A panel that slides in from a screen edge. When it rises from the bottom on mobile it is usually called a bottom sheet.
Toast토스트
A brief status message that appears in a corner of the screen and dismisses itself after a few seconds.
Tooltip툴팁
A short, non-interactive label that appears on hover or keyboard focus.
Popover팝오버
A small panel of interactive content — buttons, links — that opens next to the button that triggered it.
Dropdown menu드롭다운 메뉴
A list of commands that drops open below a button; picking one runs it immediately and closes the list.
Combobox콤보박스
A form control that combines free text input with a filtered list of candidates.
Toggle switch토글 스위치
A binary on/off control whose handle slides across a track and takes effect the instant you press it.
Checkbox체크박스
A square control for picking any number of items freely, with a third "indeterminate" (–) state for when only some children are checked.
Radio button라디오 버튼
A round control where picking one option automatically clears every other option in the same group.
Segmented control세그먼티드 컨트롤
A button group where a pill-shaped background slides behind whichever segment is selected — functionally a radio group.
Slider슬라이더
A control where dragging a handle along a track picks a value, or a range between two values.
Stepper스테퍼
A row of numbered, connected steps showing which stage of a multi-step task you are on.
Progress bar프로그레스 바
A read-only bar whose fill length reports how much of a task is complete.
Spinner스피너
A continuously rotating indicator that says work is happening, with no promise of when it ends.
Skeleton스켈레톤
Gray blocks that mimic the shape of content that hasn't arrived yet, shown while it loads.
Badge배지
A small dot or number attached to the corner of an icon or button, reporting a count or a status.
Avatar아바타
A round image representing a person, falling back to initials or an icon when no photo is available.
Breadcrumb브레드크럼
A ">"-separated trail showing where the current page sits in the site's hierarchy.
Pagination페이지네이션
Navigation that splits a long list into numbered pages and jumps between them.
Carousel캐러셀
A set of slides that cycle one at a time, sliding sideways to reveal the next.
Chip칩
A small, standalone pill-shaped label — commonly used to toggle a filter on/off or to remove itself when pressed.
Command palette커맨드 팔레트
A global search box, usually opened with ⌘K, that finds and runs any command in the app just by typing.
Rating별점
A control where filling in star-like icons expresses a score on a fixed scale, typically out of five.
Tree view트리뷰
A collapsible, nested list — like a folder tree — where expanding a branch reveals indented items inside it.
Bottom navigation하단 내비게이션
A bar fixed to the bottom of a mobile screen that switches between 3–5 top-level destinations by icon and label.
FAB
A circular button floating in a screen corner that triggers that screen's single most important action.
Search bar검색창
A text field with a magnifying-glass icon for finding content, often showing live suggestions as you type.
Dropzone드롭존
An area you can drag files onto, whose border reacts when a file passes over it to signal it can be dropped.
Hamburger menu햄버거 메뉴
A three-line icon button that reveals a hidden navigation panel — usually a drawer — when pressed.
Navigation rail내비게이션 레일
A narrow, icon-first navigation bar fixed vertically along the left edge of a screen.
Data table데이터 테이블
Rows and columns of data, often sortable by clicking a header and selectable row by row.
Timeline타임라인
A vertical list of events connected by a line and dots, ordered by when they happened.