Icon Button
텍스트 라벨 없이 아이콘만으로 구성되어, 한정된 화면 공간을 효율적으로 사용하면서 핵심 액션을 직관적으로 실행할 수 있게 해주는 버튼입니다.
컴포넌트 명세 (Component Specification)
Anatomy
button
icon
기본 기능
텍스트 라벨 없이 아이콘 단독으로 배치되어, 시스템 명령이나 부가 액션을 실행합니다.
시각 옵션
FrameSize
iconSize
variant
상태
해당 없음
내부 구성
icon
사이즈 가이드 (Size Guide )
Icon Button 크기는 L, M, S 로 제공되며, 내부 Icon Set의 크기는 24, 20, 16px을 제공합니다
Frame Size 46 / 40 / 24
L (46px)
M (40px)
S (24px)
24
24
24
24
24
24
Icon Size 24/ 20 /16
24px
20px
16px
24
20
16
24
20
16
버튼 형태 (Variant)
Icon Button 색상은 Brand Solid, Neutral Outline, Neutral Ghost 총 3가지 Variant로 구성됩니다.
사이즈별 사용 예시 (Size Usage)
실제 서비스 화면에서 Icon Button이 배치되고 활용되는 패턴입니다.
L (46px)
GNB / 상단 헤더 등 화면의 주요 영역에서 독립적인 액션에 사용됩니다.
Large
최근게시물
최근게시물
M (40px)
기본 버튼 사이즈로, 우측 상단의 더보기(Meatball) 메뉴, 일반적인 툴바
영역에 배치됩니다.
Medium
폴더이름 01
만든날짜2022-09-14
폴더이름 01
만든날짜2022-09-14
S (24px)
복잡한 데이터 테이블 내부의 작은 제어 버튼 등, 공간이 제약된 밀도 높은 UI에 사용됩니다.
Small
전체검색결과
전체검색결과
마스터 컴포넌트 (Master Component)
Master Component입니다. 컴포넌트를 복사해 원하는 위치에서 Instance로 사용합니다.
