Accordion

콘텐츠의 숨겨진 내용을 확장하거나 축소하여 보여주는 요소입니다. 클릭하여 원하는 정보만 선택적으로 볼 수 있어, 제한된 공간에서 많은 정보를 효율적으로 구성하고 탐색할 수 있도록 돕습니다.

Anatomy

  1. 1. Heading
  2. 2. Leading icon
  3. 3. Description
  4. 4. Trailing content
  5. 5. Divider(Optional)

Variants

Fill width
Vertical padding

States

Fill width

항목 내부에 좌우 여백을 포함하거나, 여백 없이 컨테이너 너비를 모두 채워 사용할 수 있습니다.

Vertical padding

상하 여백은 화면 내 배치와 정보의 계층 구조에 맞춰 유연하게 사용할 수 있습니다.

Expanded

항목 클릭 시 하위 내용을 펼쳐 볼 수 있으며, Chevron 방향이 반전되는 애니메이션이 적용됩니다. 여러 항목이 함께 펼쳐질 수 있습니다.

Leading icon

Leading icon은 Heading 좌측에 위치하며, 항목의 성격이나 카테고리를 시각적으로 표현합니다.

Trailing content

Trailing content는 Heading 우측에 위치하는 요소를 의미합니다. 아이콘과 버튼으로 사용할 수 있습니다.

Divider

구분선을 사용해 각 항목을 명확하게 구분할 수 있습니다. 구분선을 사용하는 경우 목록의 마지막 항목엔 사용하지 않습니다.

Clickable area

Heading을 포함한 전체 영역을 눌렀을 때 콘텐츠 영역이 확장됩니다. Trailing content에 Icon button을 사용한 경우, Icon button 인터랙션이 적용되며 별도 액션을 지정할 수 있습니다.

Usage

Nested accordions

Accordion 하위에 또 다른 Accodrion을 배치하여 복잡한 계층 구조를 표현할 수 있습니다. 이때, 하위 항목은 좌측에 추가적인 여백(들여 쓰기)을 주어 상위 항목과의 시각적 위계를 명확히 구분해야 합니다.

Text overflow

Heading과 콘텐츠의 길이가 길어지는 경우 제한 없이 여러 줄로 나타납니다.

How to use

Do

Accordion이 포함한 콘텐츠를 예상할 수 있도록 명확하고 간결한 Heading을 사용합니다.

Don’t

한 페이지나 시스템 내에서 열림, 닫힘을 의미하는 아이콘을 여러 스타일로 혼용하지 않습니다.

Customize

Accordion
typography
contentColor

© 2026 Wanted Lab, Inc.