버튼·액션·명령
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
주요 버튼 Primary Button
화면의 가장 중요한 실행 동작을 강조하는 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
보조 버튼 Secondary Button
주요 행동을 지원하는 두 번째 우선순위 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
3차 버튼 Tertiary Button
시각적 강조가 낮은 부가 실행 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
고스트 버튼 Ghost Button
채움 배경 없이 텍스트·아이콘 중심으로 표현한 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
아웃라인 버튼 Outlined Button
테두리로 버튼 영역을 나타내는 스타일.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
텍스트 버튼 Text Button
버튼의 배경·테두리를 최소화하고 텍스트로 실행.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
플로팅 액션 버튼 Floating Action Button (FAB)
화면 위에 떠 있는 형태로 핵심 생성 동작 등을 강조.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
분할 버튼 Split Button
기본 실행 동작과 추가 옵션 메뉴를 분리한 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
메뉴 버튼 Menu Button
클릭 시 명령 목록을 여는 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
버튼 그룹 Button Group
관련 행동을 나란히 묶은 컨트롤 그룹.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
세그먼트 버튼 Segmented Button
서로 관련된 선택지를 분절된 버튼 형태로 표현.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
토글 버튼 Toggle Button
누름·해제 상태를 유지하며 설정이나 모드를 전환.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
파괴적 버튼 Destructive Button
삭제·영구 제거 등 되돌리기 어려운 동작을 실행.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
비활성 버튼 Disabled Button
조건 미충족 등의 이유로 실행할 수 없는 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
고정형 CTA Sticky CTA
스크롤 중에도 화면 가장자리에 유지되는 행동 유도 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
더보기 버튼 Overflow Button
화면에 드러내지 않은 나머지 명령을 메뉴로 제공.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
맨 위로 이동 버튼 Back-to-top Button
긴 화면의 상단으로 빠르게 복귀시키는 버튼.
버튼·액션·명령에 해당하는 화면·상태·상호작용을 명세할 때 사용한다.
동일한 명칭도 플랫폼·디자인 시스템마다 세부 동작이 다를 수 있다. 키보드·보조기술·오류 상태를 함께 설계한다.
Buttons, Actions & Commands
Open an entry for its visual reference, comparisons and source-language text.
Primary Button 주요 버튼
A button emphasizing the most important action on a screen.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Secondary Button 보조 버튼
A secondary-priority button that supports the primary action.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Tertiary Button 3차 버튼
A supplementary action button with low visual emphasis.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Ghost Button 고스트 버튼
A button using text or an icon without a filled background.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Outlined Button 아웃라인 버튼
A button style that defines its boundary with an outline.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Text Button 텍스트 버튼
An action presented as text with minimal or no button background and border.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Floating Action Button (FAB) 플로팅 액션 버튼
A floating button emphasizing a key action, such as creating an item.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Split Button 분할 버튼
A button separating a default action from a menu of additional options.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Menu Button 메뉴 버튼
A button that opens a list of commands.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Button Group 버튼 그룹
A group of related actions arranged next to one another.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Segmented Button 세그먼트 버튼
Related options presented as connected segments of a button control.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Toggle Button 토글 버튼
A button that retains its pressed or unpressed state to switch a setting or mode.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Destructive Button 파괴적 버튼
A button for deletion or another action that is difficult to reverse.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Disabled Button 비활성 버튼
A button that cannot be activated, for example because its requirements are unmet.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Sticky CTA 고정형 CTA
A call-to-action button that stays at a screen edge while the user scrolls.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Overflow Button 더보기 버튼
A button that reveals additional commands not shown directly on screen.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.
Back-to-top Button 맨 위로 이동 버튼
A button that returns the user to the top of a long page.
Specifying buttons, actions, and commands.
Detailed behavior can differ across platforms and design systems despite identical names. Design keyboard, assistive-technology, and error behavior together.