AppButton Demo
AppButton 컴포넌트의 모든 속성을 한 화면에서 확인합니다.
버튼 유형별 기본 스타일을 정의합니다.
- fill : 배경 채움 버튼 (AppButton)
- outline : 테두리 버튼 (AppButton)
- text : 배경 없는 텍스트 버튼 (AppTextButton)
- underline : 링크 스타일 버튼 (AppTextButton)
버튼 크기를 정의합니다.
- xs
- sm
- md (default)
- lg
- xl
fill 버튼과 함께 사용
text / underline 버튼은 typography가 별도로 적용됩니다.
버튼 모서리 스타일
- square : 직각
- round : 기본 (6px)
- pill : 완전 둥근 버튼
버튼 색상 스타일
AppButton / AppTextButton 모두 아이콘 슬롯을 지원합니다.
아이콘만 있는 액션은 AppIconButton을 사용합니다. 버튼 영역과 아이콘 크기를 따로 지정할 수 있습니다.
- button-size : 클릭 영역 크기
- icon-size : 아이콘 시각 크기
- icon : 아이콘 컴포넌트
버튼 상태
- disabled : 클릭 불가
- loading : spinner 표시
- block : width 100%