Component

컴포넌트의 시각적 정의와 올바른 상호작용을 위한 UX가이드

Action Sheet

OS 시스템 액션시트를 대체하는 커스텀 액션시트입니다.

Alert Dialog

사용자에게 중요한 정보를 전달하고, 필요하면 응답을 요구하는 컴포넌트입니다.

AvatarAvatars

프로필 사진 또는 대체 이미지를 통해 사용자를 표현합니다.

Avatar GroupAvatars

프로필 사진 또는 대체 이미지를 통해 여러 사용자를 표현합니다.

Bottom Sheet

화면 하단에 고정된 보충 콘텐츠가 포함된 표면 요소입니다.

Box ButtonButtons

누르면 액션을 일으키는 박스 모양의 요소입니다.

Box Toggle ButtonButtons

선택 여부를 켜거나 끌 수 있는 박스 모양의 버튼입니다.

Capsule Toggle ButtonButtons

사용자가 선택 여부를 켜거나 끌 수 있는 버튼 요소입니다.

Text ButtonButtons

누르면 액션을 일으키는 텍스트 요소입니다.

Actionable CalloutCallouts

사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 누르는 것으로 액션이 발생합니다.

CalloutCallouts

사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다.

Dismissable CalloutCallouts

사용자의 주목을 끌어 중요한 정보를 강조하는 요소입니다. 사용자가 닫을 수 있습니다.

Checkbox

최소 1가지 이상의 옵션을 선택 또는 해제할 수 있는 컨트롤입니다.

Chip ButtonChips

누르면 액션을 일으키는 칩 모양의 요소입니다.

Chip FilterChips

여러개의 옵션 중 하나를 선택할 수 있는 컴포넌트입니다.

Chip Radio GroupChips

두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 칩 형태의 컨트롤입니다.

Chip Toggle ButtonChips

선택 여부를 켜거나 끌 수 있는 칩 형태의 버튼입니다.

Extended Floating Action ButtonFABs

화면 계층 최상위에 위치해 액션을 일으킬 수 있는 확장된 형태의 요소입니다.

Floating Action ButtonFABs

화면 계층 최상위에 위치해 액션을 일으킬 수 있는 요소입니다.

Menu Floating Action ButtonFABs

화면 계층 최상위에 위치해 메뉴를 표시 여부를 결정할 수 있는 요소입니다.

Help Bubble

특정 요소를 가리키며 간결하고 상황에 맞는 정보를 제공하는 컴포넌트입니다.

Actionable Inline AlertInline Alerts

유저가 꼭 알아야하는 경고성 메시지나 광고의 상태를 전달하는 시스템 메시지에요. 주로 Top Navigation 아래에 고정되어 노출하며, 주목도가 높으니 필요한 경우에 제한적으로 사용해주세요.

Dismissable Inline AlertInline Alerts

게시글이나 프로필에 노출되는 시스템 메시지예요. 유저가 꼭 알아야하는 경고성 메시지나 광고의 상태를 표현할 수 있어요. 주로 Top Navigation 아래에 고정되어 노출하며, 주목도가 높으니 필요한 경우에 제한적으로 사용해주세요.

Inline AlertInline Alerts

유저가 꼭 알아야하는 경고성 메시지나 광고의 상태를 전달하는 시스템 메시지입니다. 주로 Top Navigation 아래에 고정되어 노출하며, 주목도가 높으니 필요한 경우에 제한적으로 사용합니다.

Radio Group

두 가지 이상의 옵션 중 하나의 옵션만을 선택할 수 있는 컨트롤입니다.

Select Box

주로 동적폼에서 사용되며, 여러개의 선택지(옵션)를 제공하는 경우에 사용해요.

Range SliderSliders

범위 내 값을 조정할 수 있는 요소입니다.

SliderSliders

범위 내 값을 조정할 수 있는 요소입니다.

Snackbar

사용자의 특정 액션에 대한 피드백을 제공합니다.

Spinner

작업의 진행 단계 결정 또는 완료 시점이 확정되지 않은 경우 사용할 수 있는 요소입니다.

Switch

사용자가 개별 옵션을 켜거나 끌 수 있는 컨트롤입니다. 일반적으로 설정을 제어하기 위해 사용됩니다.

Tabs

다른 탭 간에 전환과 이동을 쉽게 할 수 있는 요소입니다.

Multiline Text FieldText Fields

장문의 텍스트를 여러 줄에 걸쳐 입력할 수 있는 폼 요소입니다.

Text FieldText Fields

텍스트를 한 줄에 입력할 수 있는 폼 요소입니다.